如何计算指令中选择的元素数？
提问于 2017-04-13 07:54:12
如果你有这样的职业指导：
<div ng-repeat='career in careers' career-box ng-click="toggleSelected()"> {{ career.name }} </div>该指令：
app.directive('careerBox', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.selected = false,
scope.toggleSelected = function() {
element.toggleClass('selected');
if(scope.selected) {
scope.selected = false;
} else {
scope.selected = true;
}
}
}
};
});每次选择职业框时，我都要计算所选职业框的总数(selected=true)，并在超过0的情况下启用按钮。
我怎么才能在代码中做到这一点？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-13 10:24:20
没有必要编写自定义指令。它可以通过角核指令来完成：
vm.selectedCount = function(item) {
var count=0;
for (let i=0; i<vm.careers.length; i++) {
if (vm.careers[i].selected) count++;
}
return count;
}<div ng-repeat='career in careers'
ng-click="career.selected = !career.selected"
ng-style="{'background-color': career.selected?'yellow':''}">
{{ career.name }}
</div>
<hr>Selected count: {{selectedCount()}}The PLNKR演示
演示
angular.module("myApp",[]);
angular.module("myApp").controller("myVm", function($scope) {
var vm = $scope;
vm.careers = [ {name: "Police Officer", value: 1},
{name: "Nurse", value:2},
{name: "Doctor", value:3},
];
vm.selectedCount = function(item) {
var count=0;
for (let i=0; i<vm.careers.length; i++) {
if (vm.careers[i].selected) count++;
}
return count;
}
}) <script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myVm">
<h1>Selected Div Example</h1>
<div ng-repeat='career in careers'
ng-click="career.selected = !career.selected"
ng-style="{'background-color': career.selected?'yellow':''}">
{{ career.name }}
</div>
<hr>Selected count: {{selectedCount()}}
</body>
Stack Overflow用户
发布于 2017-04-13 08:27:38
首先，您需要一个带有multiple属性的select元素：
<select name="carers" multiple id="multipleCarers" ng-model="data.multipleCarers">
<option ng-repeat="career in careers" value="{{career.value}}">
{{career.name}}
</option>
</select>在此之后，您可以获得选择的选项数：
{{data.multipleCarers.length}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43396770
复制相关文章
腾讯云开发者
