javascript - 需要优化的解决方案，并且不使用 jquery 函数

Question

我是 angularjs 的新手，实际上来自 jQuery 背景，我创建了一个 fiddle 来演示数组中选定的选项。但在这期间我使用了 jQuery $.each 函数(可能必须使用 angular.forEach，但没有达到结果)，

1.请仅使用 Angular 函数来完全纠正我的功能，
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>

在我的 Controller 中

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 并将其更新为更 Angular 方式

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

干杯