当使用AngularJS选中或取消选中复选框时，向数组添加和删除对象详细信息的好方法是什么? [英] What's a good way of adding and remove object details to an array when a checkbox is checked or unchecked using AngularJS?

问题描述

我有一个接受对象的API，例如

I have an API which takes objects e.g.

{ 
   'title': 'Some', 
   'desc': 'thing', 
   'environments': '[
           {'id': 1}, 
           {'id': 2}
    ]
}

要添加新条目，我有一个表单，用于设置要传递给我的API的对象的标题和说明:

To add new entries i have a form for setting the title and the description for the object i'm going to pass to my API:

<form class="form horizontal"role="form" ng-submit="vm.submitForm()">

        <label for="Title">Title</label>
        <input  class="form-control"
                id="Title" 
                type="text" 
                ng-model="vm.myObj.title" 
                placeholder="Title"/>

        <label for="Desc">Description</label>
        <input  class="form-control"
                id="Desc" 
                type="text" 
                ng-model="vm.myObj.desc" 
                placeholder="Description"/>

        <div class="checkbox" ng-repeat="env in vm.availableEnvs">
            <label>
                <input type="checkbox" /> 
                {{env.label}}
            </label>
        </div>

        <hr />

        <button>Submit</button>
</form>

在表格中，您可能会看到我有一个 ng-repeat ，它会在一系列环境对象上重复:

In the form you probably saw that i had a ng-repeatthat repeats over an array of environment objects:

this.environments = [
        { id: 1, label: "US" },
        { id: 2, label: "EU" },
        { id: 3, label: "ASIA" },
        { id: 4, label: "AFRICA" }
    ];

由于API需要获取以下数组: {id:x} 对象，所以我想知道是否有人能为(code)myObj添加(和删除)对象详细信息.环境是在您选中或取消选中复选框时使用的数组?

Since the API need to get an array of: {id: x } objects, i was wondering if anyone has a good way for adding (and removing) object details to myObj.environmentsarray when you check or un-check a checkbox?

我的.js代码:在此链接到JSFiddle

(function(){
angular
    .module('myApp', [])
    .controller('MyCtrl', MyCtrl)
    .service('EnvService', EnvService);


MyCtrl.$inject = ['EnvService'];
function MyCtrl(EnvService) {
    var vm = this;
    vm.availableEnvs = EnvService.getAvailableEnvironments();

    vm.myObj = { 
        title: '', 
        desc: '',
        environments: [] 
    };

    vm.submitForm = submitForm;

    function submitForm() {
        //Call a service that handles $http and makes a POST with myObj                        
    }

}

function EnvService() {
    this.environments = [
        { id: 1, label: "US" },
        { id: 2, label: "EU" },
        { id: 3, label: "ASIA" },
        { id: 4, label: "AFRICA" }
    ];

    this.getAvailableEnvironments = function() {
        return this.environments;   
    }
}
})();

推荐答案

在这种情况下，我的工作概述如下:

What I do in such cases is outlined as follows:

1. 创建一个中间数组，并保留设置的成员资格，即，如果在主数组中包含 mainArray [i] ，则 intermediateArray [i] 为 true 发布数据.显然将 intermediateArray [i] 绑定到第i个复选框.
2. 在 intermediateArray 上执行 $ watchCollection ，并相应地设置目标集合.

1. Make an intermediate array, holding the set memberships, i.e. intermediateArray[i] is true if mainArray[i] is included in the post data. Obviously bind intermediateArray[i] to the i-th checkbox.
2. Do a $watchCollection on the intermediateArray and set the target collection accordingly.

分叉的小提琴: http://jsfiddle.net/Lz23r2hd/

(在小提琴中，我还更改了服务以返回承诺-我认为这是最佳做法，但对于此答案而言不是必需的.)

(In the fiddle I also changed the service to return a promise - I believe it is a best practice, but non-essential for this answer.)

这篇关于当使用AngularJS选中或取消选中复选框时，向数组添加和删除对象详细信息的好方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！