清单模型和清单值未更新模型或未按预期运行答案

【问题标题】：checklist-model and checklist-value not updating model or not functioning as expected清单模型和清单值未更新模型或未按预期运行
【发布时间】：2017-01-27 11:48:48
【问题描述】：

下面是 HTML 的内容

<label ng-repeat="(index, item) in field.optionValue">
          <input type="checkbox" 
          checklist-model="formControlsValues[dbColumnName]"  
          checklist-value="item">{{field.optionName[index]}}
        </label>

field.optionValue 和 field.optionName 是一个数组

field = { optionValue : ["1","2","3"], optionName : ["xxx", "yyy", "zzz"] }

checklist-model，formControlsValues[dbColumnName] 是一个动态对象模型，当勾选/选中复选框时，它会填充值。
在渲染过程中 formControlsValues[dbColumnName] 将是控制器中的 $scope.formControlsValues.Village 或 $scope.formControlsValues.State 并且预计会填充下面提到的格式 $scope.formControlsValues.Village = ["2","1"]

【问题讨论】：

谁能帮我解决一下这里的问题？

标签： javascript angularjs multi-select checkboxlist

【解决方案1】：

这是工作代码。我想指出您必须将数字作为数字而不是字符串（带双引号），因为您将来可能会导致问题。

// Code goes here

var app = angular.module('checkList', ["checklist-model"]);

app.controller('checkListCtrl', function ($scope) {
  $scope.formControlsValues = {};
  $scope.field = { 
      optionValue : ["1","2","3"], 
      optionName : ["xxx", "yyy", "zzz"],
      dbColumnName : "State"
  };
  
  $scope.dbColumns = ['State', 'Village'];
  $scope.formControlsValues = {
    Village : [],
    State : []
  }
});

<!DOCTYPE html>
<html ng-app="checkList">

  <head>
    <script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <script data-require="checklist-model.js@*" data-semver="0.0.1" src="http://vitalets.github.io/checklist-model/checklist-model.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="checkListCtrl">
      <h4>Checklist model</h4>
      <div>
        <label ng-repeat="(index, item) in field.optionValue">
            <input type="checkbox" 
            checklist-model="formControlsValues[field.dbColumnName]"  
            checklist-value="item">{{field.optionName[index]}}
        </label>
      </div>
      <br />
      <div>
        <select ng-model="field.dbColumnName" ng-options="d for d in dbColumns"></select>
      </div>
        <div>
          <label>Selected Villages: {{formControlsValues.Village}}</label>
        </div>
        <div>
         <label>Selected States: {{formControlsValues.State}}</label>
      </div>
  </body>

</html>

【讨论】：

+1 表示“我想指出您必须将数字作为数字而不是字符串（带双引号），因为您将来可能会导致问题。”。这就是我的问题。

【解决方案2】：

我已经做到了。它正在工作。

http://jsfiddle.net/fxsu6e79/1/

$scope.formControlsValues={
  State:[
     "1","3"
  ],
  Village:[
     "2","3"
  ]
};

还好吗？

【讨论】：

嗨@fingerpich。首先，我要感谢您为此付出的努力。对象应该是 $scope.field = { optionValue : ["1","2","3"], optionName : ["xxx", "yyy", "zzz"], dbColumnName : "State" } 其中我可以跟踪值 $scope.field.State
我还需要添加“checklist-model”是一个注射器吗？
您应该在 Angular 应用程序中添加 checklist-model 模块作为依赖项，并且您不需要将其注入控制器。
谢谢@fingerpich :)

【解决方案3】：

<div ng-controller="DemoCtrl">
  <label ng-repeat="(index,value) in field.optionValue">
    <input type="checkbox" checklist-model="formControlsValues[field.dbColumnName]" checklist-value="value"> {{field.optionName[index]}}
  </label>
  values : {{ formControlsValues[dbColumnName]}}
</div>

脚本

angular.module("DemoApp", ["checklist-model"])
.controller('DemoCtrl', function($scope) {
  $scope.field = { 
      optionValue : ["1","2","3"], 
      optionName : ["xxx", "yyy", "zzz"], 
      dbColumnName : "State" 

  }
  $scope.dbColumnName="State";
  $scope.formControlsValues={
      State:[]
  };
});

查看示例：http://jsfiddle.net/KarthikParameswaran/fxsu6e79/4/

【讨论】：