javascript - 如何使用 AngularJS 检索所有已检查项目的列表?

标签 javascript angularjs angularjs-material

我正在尝试更改 this 的功能AngularJS 同步 ( Using <input type="checkbox"> ) 以返回对象数组的示例。

在我的 html 中,我有以下使用 ng-repeat 的代码以及 AngularJS 演示示例中的一些函数调用:

<div ng-repeat="item in items" class="standard" flex="50">
      <label> <input type="checkbox" ng-checked="exists(item, selected)" /> {{item.name}} </label>
</div>

我还有一个按钮可以选择或删除所有复选框条目:

 <label> <input type="checkbox" ng-checked="isChecked()" ng-click="toggleAll()" autofocus ng-model="checkbox" ng-change='delayedSearch(0)'/>
        <span ng-if="!isChecked()">all</span>
        <span ng-if="isChecked()">nothing</span>
  </label> <br><br>

在我的 Controller 中,我按如下方式初始化数组项:

$scope.items = [{name:'K://',value:'nemo'},{name:'Bugzilla',value:'bugzilla'},{name:'Jira',value:'jira'}];

以及与复选框交互的相应函数:

    $scope.toggle = function (item, list) {
            var idx = list.indexOf(item);
            if (idx > -1) {
                    list.splice(idx, 1);
                    if (list.length == 0){
                            list.push('nothing');
                    }
            }else {
                    var id = list.indexOf('nothing');
                    if (id > -1) {
                            list.splice(id,1);
                    }
                    list.push(item);
            }
    };

    $scope.exists = function (item, list) {
            return list.indexOf(item) > -1;
    };

    $scope.isChecked = function() {
            return $scope.selected.length === $scope.items.length;
    };

    $scope.toggleAll = function() {
            if ($scope.selected.length === $scope.items.length) {
                    $scope.selected = ['nothing'];
            } else if ($scope.selected.length === 0 || $scope.selected.length > 0) {
                    $scope.selected = $scope.items.slice();
            }
    };

目前我的代码返回所有选中项目的对象列表,例如:

[{"name":"K://","value":"nemo"},{"name":"Bugzilla","value":"bugzilla"},{"name":"Jira","value":"jira"}]

我想获取仅包含所有已检查项目的值的列表,如下所示:

["nemo","bugzilla","jira"]

最佳答案

您可以像这样映射结果列表:

   var valuesArray =  [{"name":"K://","value":"nemo"},{"name":"Bugzilla","value":"bugzilla"},{"name":"Jira","value":"jira"}].map(function(obj) {
      return obj.value;
    }); // ["nemo","bugzilla","jira"]

关于javascript - 如何使用 AngularJS 检索所有已检查项目的列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45813731/

相关文章:

javascript - 更改 md-checkbox 颜色

javascript - 如何在三个js中改变AxesHelper的颜色?

javascript - 身份验证后运行 Javascript 而不是重定向

javascript - 在脚本和 css 中,符号/* */是否会像空格一样增加文件大小?

javascript - 如何在 AngularJS 1.x 中对过滤器进行单元测试

javascript - 使用 AngularJS 获取 'ng-repeat' 项的索引(计数器)?

javascript - 无法从 req.header.authorization 解码 base64

javascript - AngularJS 不处理 JSON 引用

html - 如何在 md-tooltip 中编译/添加 HTML

angularjs - Angular - Material - 测试 - $mdSidenav