Question

我的HTML：

<div class="panel-body">

        <span ng-repeat="industry in ctrl.industryList">
      <label>
        <input type="checkbox" id="industry" ng-model="ctrl.oneIndustry" ng-change="ctrl.updateSelected(industry)">
        {{industry}}
      </label><br/>
    </span>
</div>

我正在遍历一系列行业并显示一个复选框。勾选复选框后，它将存储到数组中。如果该复选框未被取消，我想将其从数组中删除：

我的控制器代码：

vm.updateSelected = function (industry) {
    if (vm.oneIndustry) {

        vm.industries.push(industry)
    }
    else{
        vm.industries.pop(industry)
    }}

当前问题是当单击一个复选框时，列表中的所有项目都会被勾选，尽管只保存了单击的一次。取消时，该项目将从列表中删除，所有复选框都将被取消选中。如何勾选并取消选中特定的复选框？

Answer 1

ngModel helper

ngModel，输入为字符串。可分配的AngularJS表达式以数据绑定到。

AngularJS表达式的名称应该不同。

<input type="checkbox" id="industry-one" ng-model="ctrl.oneIndustry"/>

<input type="checkbox" id="industry-two" ng-model="ctrl.twoIndustry"/>

Answer 2

您不能对多个复选框使用相同的静态ng-model，您需要使用动态ng-model或分配给重复数组中的值的ng-model="industry.isSelected"。这样每个复选框都有自己独立的模型。

您可以通过多种方式执行此操作：

添加到重复的数组中，使其在数组中的每个对象中都有一个值，表示是否选择了该对象。为此，您可以将其分配为ng-model="selection.industryIds[industry.id]"。
有一个单独的对象存储bool，以确定是否选择了每个数组对象。为此，您可以像vm.updateSelected = function (industry) { if (industry.isSelected) { vm.industries.push(industry) } else{ vm.industries.pop(industry) }}

在您的情况下，最好的选项可能是第一个，您还需要将if语句更改为以下内容：

//Remote function using updated the owner of the task
public class TaskOwnerUpdate {

    public String dueDate { get; set; }
    public Set<Id> selectedTaskIdSet {get; set;}
    String ownerIdValue {get; set;}
    String selectedColumnValue {get; set;}
    public static List<Task> taskList { get; set;}
    public TaskOwnerUpdate() { } // empty constructor
    public List<Task>selectedtaskList {get; set;}

    public Task getOwnerIdTask() {

        return [SELECT  OwnerId FROM TASK LIMIT 1];
    }

    @RemoteAction
    public static List<Task> getTask (String dueDate) {

        system.debug('dueDate value is------>'+dueDate);
        List<String> stList = dueDate.split('"');
        system.debug('stList value---->'+stList);
        List<String>s1 = stList[0].split(',');
        system.debug('stList[0] value is---->'+stList[0]);
        system.debug('stList[1] value is---->'+stList[1]);
        List<String> splitList = stList[1].split('/');
        system.debug('splitList value is---->'+splitList);
        String dueDate1 = splitList[2]+'-'+splitList[0]+'-'+splitList[1]; 
        taskList = [SELECT Id, Subject, Priority, Status, ActivityDate, Owner.Name, OwnerId 
                   FROM Task WHERE ActivityDate >= :Date.valueOf(dueDate1)];
        system.debug('taskList- value is------>'+taskList);
        return taskList;        

    }

    @RemoteAction 
    public static List<Task> updateTask(String ownerIdValue, String selectedColumnValue ) {

        system.debug('OwnerId value is----->'+ownerIdValue);
        system.debug('selectedColumnValue value is---->'+selectedColumnValue);

        List<Task> updatedTaskList = new List<Task>();


        Set<Id> idSet = new Set<Id>();
        List<String> deserializeStringList = (List<String>)System.JSON.deserialize(selectedColumnValue, List<String>.class);

        system.debug('deserializeStringList value>>>>'+deserializeStringList);

        for (String strRecord : deserializeStringList) {

            Task taskRecord = new Task();
            taskRecord.Id = Id.valueOf(strRecord);
            taskRecord.OwnerId = Id.valueOf(ownerIdValue);
            updatedTaskList.add(taskRecord);
        } 

        if (updatedTaskList.size() > 0) {
            Update updatedTaskList;
        }
         return updatedTaskList;

    }

}

AngularJS：使用带有复选框的ngRepeat和ngModel会导致所有复选框都被勾选

2 个答案: