i'm new in angularjs , while building first crud example face problem in update function; other function correct except update.
<html lang="en"> <head> <meta charset="utf-8"> <title>angular sort , filter</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <style> body { padding-top: 50px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body> <div class="container" ng-app="sortapp" ng-controller="maincontroller"> <table class="table table-bordered table-striped"> <thead> <tr> <td> name </td> <td> age </td> <td colspan="3"> birth day </td> </tr> </thead> <tbody> <tr ng-repeat="person in persons"> <td ng-bind: "person.name">{{ person.name }}</td> <td ng-bind: "person.age">{{ person.age }}</td> <td ng-bind: "person.bday">{{ person.bday }}</td> <td> <input type="button" ng-click="edit(person,persons,indexof(person))" value="edit" /> </td> <td> <input type="button" ng-click="del(indexof(person))" value="delete" /> </td> </tr> </tbody> </table> <table class="table table-bordered table-striped"> <tbody> <!-- table enter data--> <tr> <td>enter name: </td> <td> <input type="text" ng-model="name" /> </td> </tr> <tr> <td>enter age: </td> <td> <input type="text" ng-model="age" /> </td> </tr> <tr> <td>enter birth day: </td> <td> <input type="text" ng-model="bday" /> </td> </tr> <tr> <td> <input type="button" ng-click="btnclk()" value="save" /> </td> <td> <input type="button" ng-click="btnupd(name,age,bday)" value="update" /> </td> </tr> </tbody> </table> </div> <script> angular.module('sortapp', []) $scope.persons = [{ name: 'seif', age: '15', bday: 2 }, { name: 'zied', age: '14', bday: 4 }, { name: 'meriem', age: '17', bday: 7 }, { name: 'jaber', age: '2', bday: 6 }]; $scope.del = function(index) { $scope.persons.splice(index, 1); }; $scope.btnclk = function() { if (!$scope.name) { alert("enter name"); } else if (!$scope.age) { alert("enter age"); } else if (!$scope.bday) { alert("enter birth day"); } else { $scope.persons.push({ 'name': $scope.name, 'age': $scope.age, 'bday': $scope.bday }); $scope.name = ''; $scope.age = ''; $scope.bday = ''; } }; var key; $scope.edit = function(person, index) { key = index; $scope.name = person.name; $scope.age = person.age; $scope.bday = person.bday; }; $scope.btnupd = function(name, age, bday) { $scope.persons[key].name = name; $scope.persons[key].age = age; $scope.persons[key].bday = bday; $scope.name = ''; $scope.age = ''; $scope.bday = ''; }; }); </script> </body> </html>
few things:
- while calling edit function passing 3 params.
keyvariable getting setpersonspassing. - there no need pass name, age, bday btnupd(). can use $scope variables instead. $scope.persons[key].name = $scope. name;
- instead of defining
var keyprefer defining$scope.key, use way
Comments
Post a Comment