Angular.js – using ng-click with an anchor

A simple Angular.js example of using ng-click with an anchor to generate a new user in the table. 
<!DOCTYPE html>
<html ng-app="testApp">
<head>

<style>

  table, th , td  {
    border: 3px solid black;
    border-collapse: collapse;
    padding: 10px;
  }
  table tr:nth-child(odd)	{
    background-color: #eeeeee;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }

</style>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Angular.js example"/>

    <title>Tizen Angular.js example</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script>

        var app = angular.module('testApp', []);

        var maleNames = ['Bart', 'Luke', 'Radoslav', 'Rafaello', 'Camil', 'Kayetan'];
        var femaleNames = ['Caroline', 'Eve'];
        var maleSurnames = ['Choppa', 'Berrynski', 'Manymountain', 'Groundus', 'Thirdone', 'Wolfie'];
        var femaleSurnames = ['Rabbit','Masuria'];

            app.controller('AppController', function($scope) {

                $scope.people= [{name:'Bart', surname:'Choppa', sex: 'male'},
                                {name:'Luke', surname:'Berrynski', sex: 'male'},
                                {name:'Caroline', surname:'Rabbit', sex: 'female'}];

                $scope.sexType = "male";

                $scope.generate = function() {

                  var person = {};
                  var sex = Math.round(Math.random() * 1);

                  switch(sex) {

                    case 0: // female
                      person.sex = 'female';
                      person.name = femaleNames[Math.floor(Math.random() * femaleNames.length)];
                      person.surname = femaleSurnames[Math.floor(Math.random() * femaleSurnames.length)];
                    break;

                    case 1: // male
                      person.sex = 'male';
                      person.name = maleNames[Math.floor(Math.random() * maleNames.length)];
                      person.surname = maleSurnames[Math.floor(Math.random() * maleSurnames.length)];
                    break;

                  }

                  $scope.people.push(person);

                };

            });

    </script>
</head>

<body>
<div ng-controller="AppController">
  <p>Employee listing</p>
<br>
  <a href="" ng-click="generate()">Generate new user</a>
<br><br>

<table>
<tr ng-repeat="x in people">
  <td>
   {{ $index + 1 }}
  </td>
  <td>
   {{ x.name }}
  </td>
  <td>
   {{ (x.surname | uppercase) }}
  </td>
</tr>
</table>

</div>
</body>

</html>
List

Responses

0 Replies