Question

我是angularjs的新手，实际上是从jQuery背景，我创建了一个小提琴，演示了数组中的选定选项。但是在我之间我使用了jQuery $ .each函数（可能必须使用angular.forEach，但没有达到结果），

1.请仅使用角度功能完全纠正我的功能，
2.还请建议我做这个功能的可行/标准方式。由于此复选框的数量可能会随选择框中的选项一起增加或减少。

<div ng-app="checkbox" ng-controller="chkController">
    Check me to select: <br/>
    <input type="checkbox" ng-model="selected1" ng-click="getSelectedIds()" />Hello 1<br/>
    <input type="checkbox" ng-model="selected2" ng-click="getSelectedIds()" />Hello 2<br/>
    <input type="checkbox" ng-model="selected3" ng-click="getSelectedIds()" />Hello 3<br/>
    <input type="checkbox" ng-model="selected4" ng-click="getSelectedIds()" />Hello 4<br/>
    <input type="checkbox" ng-model="selected5" ng-click="getSelectedIds()" />Hello 5<br/>

<select id="selectBox" multiple="multiple" style="width:200px;" >
    <option id="greet1" ng-selected="selected1">Hello 1!</option>
    <option id="greet2" ng-selected="selected2">Hello 2!</option>
    <option id="greet3" ng-selected="selected3">Hello 3!</option>
    <option id="greet4" ng-selected="selected4">Hello 4!</option>
    <option id="greet5" ng-selected="selected5">Hello 5!</option>
</select>
    <input type="button" value="Show Selected" ng-click="showValues();" />
</div>

在我的控制器中

var checkbox = angular.module('checkbox', []);

    checkbox.controller('chkController', function($scope){     
       $scope.myArr = [];
        $scope.getSelectedIds = function(){

            $("select option").each(function(i, j){

                if($(j).is(':selected') && ($scope.myArr.indexOf($(j).attr("id")) == -1)){
                 $scope.myArr.push($(j).attr("id"));   
                }

            });

        };   
        $scope.showValues = function(){
            console.log($scope.myArr);
        }
    });

Fiddle Demo

Answer 1

我已经把你的jsfiddle更新为更有棱角的方式

http://jsfiddle.net/M44RF/6/

你可以看到我实施了2 ng-repeat

<label ng-repeat="chk in dataForCheckboxes" style="display: block"><input type="checkbox" ng-model="chk.selected"/>{{chk.label}}</label>

<select id="selectBox" multiple="multiple" style="width:200px;height: 300px;" ng-model="selectedChk">
    <option value="{{chk.label}}" ng-repeat="chk in dataForCheckboxes" ng-selected="chk.selected">{{chk.label}}</option>

它因为在MVC中View应该由Controller

驱动

Information on angularJS $filter

干杯

需要优化解决方案，不使用jquery功能

1 个答案: