javascript - Reload Model On ng-click -
this html code:
<html ng-app="myapp"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>angular app</title> <script type="text/javascript" src="resources/angularjs-1.2.22/angular.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-animate.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-cookies.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-mocks.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-resource.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-route.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-sanitize.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/angular-touch.js"></script> <script type="text/javascript" src="resources/angularjs-1.2.22/i18n/angular-locale_fr-fr.js"></script> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/controllers/controller.js"></script> <script type="text/javascript" src="js/directives/directive.js"></script> <script type="text/javascript" src="js/filters/filter.js"></script> <script type="text/javascript" src="js/services/service.js"></script> <!-- flatui --> <!-- loading bootstrap --> <link href="resources/flatui/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="resources/flatui/bootstrap/css/prettify.css" rel="stylesheet"> <!-- loading flat ui --> <link href="resources/flatui/css/flat-ui.css" rel="stylesheet"> <link href="resources/flatui/css/docs.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body ng-controller="defaultcontroller"> <table class="table table-striped"> <thead> <tr> <th>name</th> <th>price</th> </tr> </thead> <tbody> <tr simple-repeater source="products" item-name="item"> <td>{{item.name}}</td> <td>{{item.price | currency}}</td> </tr> </tbody> </table> <button class="btn btn-default text" ng-click="changedata()">change</button> </body> </html> this controller:
app.controller("defaultcontroller", function($scope) { $scope.datasource= "controller"; $scope.products = [{ name: "apples", price: 1.20 }, { name: "bananas", price: 2.42 }, { name: "pears", price: 2.02 }]; $scope.changedata = function() { var info = [{ name: "apples1", price: 1.20 }, { name: "bananas1", price: 2.42 }, { name: "pears1", price: 2.02 }]; $scope.products.length = 0; (var = 0; < data.length; i++) { $scope.products.push(data[i]); } } }) this directive:
app.directive("simplerepeater", function() { homecoming { scope: { data: "=source", propname: "@itemname" }, transclude: 'element', compile: function(element, attrs, transcludefn) { homecoming function($scope, $element, $attr) { $scope.$watch("data.length", function() { var parent = $element.parent(); parent.children().remove(); (var = 0; < $scope.data.length; i++) { var childscope = $scope.$new(); childscope[$scope.propname] = $scope.data[i]; transcludefn(childscope, function(clone) { parent.append(clone); }) } }) } } } }) all tyring reload model on click, ie old info has removed , new info has loaded, can 1 please tell me going wrong new info not getting updated on view, help appreciated, thanks.
use $watchcollection instead of $watch. in case array doesn't alter length, want observe contents changes. need watch array itself, not length:
$scope.$watchcollection("data", function () { var parent = $element.parent(); parent.children().remove(); (var = 0; < $scope.data.length; i++) { var childscope = $scope.$new(); childscope[$scope.propname] = $scope.data[i]; transcludefn(childscope, function (clone) { parent.append(clone); }); } }); demo: http://plnkr.co/edit/6mbhqhlldf28bnfvaqu1?p=preview javascript angularjs angularjs-directive angularjs-scope angularjs-ng-click
No comments:
Post a Comment