Sunday, November 1, 2015

Angular pass selected item

We need to pass the selected list from the table. This can be achieved by passing the selected item list as shown below

  • On ng-click  we need to pass the selected item list as parameter
  • We can fetch the selected list in java script function as shown below
EDIT IN PLUNKER





<html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <meta charset="utf-8" />
</head>
<body >
<div class="container" ng-controller="userCtrl">
    <h2>Pass selected value from table</h2>
    <div class="row">
        <table class="table table-bordered table-striped table-hover">
            <thead>
               <tr><th>Student No</th>
                   <th>First Name</th>
                   <th>Confirm</th>
               </tr>
            </thead>
            <tbody>
            <tr ng-repeat="users in Users" >
                <td>{{users.StudentNo}}</td>
                <td>{{users.FirstName}}</td>
                <td ><input type="Button" value="Confirm" class="btn btn-success btn-group-lg fa " ng-click="confirm(users)" /></td>
             </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

Script
    //declare a module
    var myAppModule = angular.module('myApp', []);
    myAppModule.controller('userCtrl', function ($scope) {
        $scope.Users =
        [
             { "StudentNo": "1", "FirstName": "Prathap", "ID" :"001"},
             { "StudentNo": "2","FirstName": "John", "ID" :"002"},
             { "StudentNo": "3","FirstName": "Peter", "ID" :"003"}

        ];
        $scope.confirm = function (users) {
          alert("Selected ID :"+users.ID);
    }
       
    });
</script>



Output




No comments:

Post a Comment