我试图写一个函数,使我能够删除一个项目时,按钮被点击,但我认为我与函数混淆-我使用$digest吗?
HTML & app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
要删除项,您需要从数组中删除它,并可以将bday项传递给标记中的删除函数。然后在控制器中查找项目的索引并从数组中删除
<a class="btn" ng-click="remove(item)">Delete</a>
然后在控制器中:
$scope.remove = function(item) {
var index = $scope.bdays.indexOf(item);
$scope.bdays.splice(index, 1);
}
Angular会自动检测bdays数组的变化,并更新ng-repeat
演示:http://plnkr.co/edit/ZdShIA?p=preview
编辑:如果使用服务器进行实时更新,将使用您使用$resource创建的服务来管理数组更新,同时更新服务器
我不同意你应该在控制器上调用一个方法。你应该为任何实际的功能使用服务,你应该为任何可伸缩性和模块化的功能定义指令,以及分配一个单击事件,其中包含你注入到指令中的服务调用。
例如,在你的HTML中…
<a class="btn" ng-remove-birthday="$index">Delete</a>
然后,创建一个指令…
angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){
return function(scope, element, attrs){
angular.element(element.bind('click', function(){
myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);
};
};
}])
那么为你服务…
angular.module('myApp').factory('myService', [function(){
return {
removeBirthday: function(birthdayIndex, scope){
scope.bdays.splice(birthdayIndex);
scope.$apply();
}
};
}]);
当您像这样正确地编写代码时,您将非常容易编写将来的更改,而不必重新构造代码。它被正确地组织起来,并且通过使用自定义指令绑定来正确地处理自定义单击事件。
例如,如果你的客户说,“嘿,现在让它调用服务器并制作面包,然后弹出一个模态。”您将能够轻松地访问服务本身,而无需添加或更改任何HTML和/或控制器方法代码。如果控制器上只有一条线,那么最终需要使用服务,将功能扩展到客户端要求的更重的起重设备。
此外,如果你在其他地方需要另一个“删除”按钮,你现在有一个指令属性('ng-remove-birthday'),你可以很容易地将其分配给页面上的任何元素。这使得它现在是模块化和可重用的。这将在处理Angular 2.0的HEAVY web组件范例时派上用场。2.0中没有控制器。:)
发展快乐! !