单击按钮即可获取选定的复选框项目

Question

我该如何去有关从按钮的点击得到检查复选框项目的ID在重复列表和添加项目供以后使用变量/数组？

HTML：

<input id="btnCheck" type="button" value="Next" ng-click="addSelected()" />    
<div ng-controller="movieController">
        <ul>
            <li ng-repeat="movie in Movies">
                    <input id="chkBox-{{ movie.MovieID }}"
                         type="checkbox"
                         ng-checked="selection.indexOf(movie.MovieID) > -1"
                         ng-click="toggleSelection(movie.MovieID)"
                    />
            </li>
        </ul>
    </div>

脚本：

$scope.AddSelected = function () {
    var selected = $scope.selection
    console.log(selected);
}

$scope.selection = [];
$scope.toggleSelection = function toggleSelection(movie) {
    var idx = $scope.selection.indexOf(movie);
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }
    else {
        $scope.selection.push(movie);
    }
};

Answer 1

您可以使用ng-options进行多重选择。 更有用；

<select name="movies" ng-model="selectedMovieIDs" 
ng-options="m.MovieID as m.MovieID for m in movies">

</select>

更多信息： ngOptions

Answer 2

您可以创建一个自定义过滤器，该过滤器将返回一个选定的值ID，为此您需要传递两个参数以过滤第一个参数将执行检查，如果为true，则将从过滤器返回第二个参数属性数组。

标记

<body ng-app="app">
  <div ng-controller="movieController">
    {{(Movies | returnPropertyWhenCheckedTrue: 'checked' :'MovieID')}}
    <ul>
      <li ng-repeat="m in Movies">
        <input id="chkBox-{{ m.MovieID }}" type="checkbox" ng-model="m.checked"/>
      </li>
    </ul>
  </div>
</body>

过滤

app.filter('returnPropertyWhenCheckedTrue', function() {
  return function(array, propertyToChecked, property) {
    var returnArray = [];
    angular.forEach(array, function(value, index) {
      if (value[propertyToChecked])
        returnArray.push(value[property]);
    });
    return returnArray;
  }
});

工作朋克

单击按钮即可获取选定的复选框项目

问题描述

2 个解决方案

解决方案1
0 2015-04-29 07:20:33

解决方案2
0 已采纳 2015-04-29 07:23:40

单击按钮即可获取选定的复选框项目

问题描述

2 个解决方案

解决方案1 0 2015-04-29 07:20:33

解决方案2 0 已采纳 2015-04-29 07:23:40

解决方案1
0 2015-04-29 07:20:33

解决方案2
0 已采纳 2015-04-29 07:23:40