javascript - How the dialog window is updating the main table in angularjs? -
i have list of tasks, each task can edited new dialog window. after closing dialog shows edited tasks. question how table ng-model connected ng-model of dialog window.
please see demo
task in table filling through ng-repeat , and expression. when click edit open new dialog. in dialog ng-model="selectedtask.description" defined , in angulur ` $scope.selectedtask = task;' define. till here every thing o.k, how when dialog closed how updated info showed in table.
<body ng-app="myapp" ng-controller="tasksctrl"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">todo api client demo</a> </div> </div> <div> <table class="table table-striped"> <tbody> <tr> <td style="width: 1px;"></td> <td> <b>task</b> </td> <td> <b>options</b> </td> </tr> <tr ng-repeat="task in tasks"> <td>{{task.title}}</td> <td>{{task.description}}</td> <td> <a class="btn" data-toggle="modal" ng-click="beginedit(task)">edit</a> </td> </tr> </tbody> </table> <a class="btn" data-toggle="modal" data-target="#add" ng-click="addtask(task)">add task</a> </div> <!-- start edit modal --> <div id="edit" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="editdialoglabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="editdialoglabel">edit task</h3> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputtask">task</label> <div class="controls"> <input type="text" ng-model="selectedtask.title" id="inputtask" placeholder="task title" style="width: 150px;"> </div> </div> <div class="control-group"> <label class="control-label" for="inputdescription">description</label> <div class="controls"> <input type="text" ng-model="selectedtask.description" id="inputdescription" placeholder="description" style="width: 300px;"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input ng-model="selectedtask.done" type="checkbox"> done </label> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="edittask()" data-dismiss="modal">update task</button> <button class="btn" data-dismiss="modal" aria-hidden="true">cancel</button> </div> </div> <!-- end edit modal --> <script> var app = angular.module('myapp', []); app.controller('tasksctrl', function($scope, $http) { $http.get("data.json") .success(function(response) { $scope.tasks = response.tasks; }); $scope.beginedit = function(task) { //alert(task.title); $scope.selectedtask = task; $('#edit').modal('show'); }; $scope.edittask = function() { $('#edit').modal('hide'); }; }); </script> </body>
because using ng-model two-way binding (source view, , view-> source).
refer more: http://www.angularjshub.com/examples/basics/twowaydatabinding/
hope helps.
Comments
Post a Comment