Question

我有一个JSON对象，我用ng-repeat重复，键是字符串，值是一个数组。我将每个值列为复选框。我想创建第二个对象，其中包含仅检查的复选框的列表。我想用键和值来保留对象的结构。

我不确定如何正确地将它绑定到模型，以便保留结构。

这是我的HTML

<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
    <h4>Inputs</h4>
    <ul ng-repeat="(parent, values) in inputs">
        <span>{{parent}} : </span>
        <li ng-repeat="value in values"><label>{{value}}
            <input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" >                               
            </input></label>
        </li>
    </ul>    

    <h4>Outputs</h4>
    <ul ng-repeat="(key,value) in inputs">
        <li>
            {{key}} : {{output[key]}}
        </li>
    </ul>
</div>

和我的JS

function Controller($scope) {
    $scope.output = {};
    $scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}

有一些简单的方法吗？我觉得我错过了一些小问题，这一切都会很好用。

Answer 1

我的示例在推荐的语法中使用了角度逻辑（非全局）。我纠正了你的标记也存在一些问题。

在此示例中，ng-model="x"是我不使用的占位符，但必须存在ng-model或引发错误。我使用ng-change来处理复选框与$scope.outputs之间的链接。

Live demo here (click).

<强>标记：

<div ng-app="myApp" ng-controller="myCtrl">
  <h3 >Dynamic data binding AngularJS</h3>
  <h4>Inputs</h4>
  <ul>
    <li ng-repeat="(typeKey, typeVal) in inputs">
      <span>{{typeKey}} : </span>
      <ul>
        <li ng-repeat="value in typeVal">
          <label>{{value}}
            <input
              type="checkbox"
              ng-model="x"
              ng-change="setOutput(typeKey, $index, value)"
            >
          </label>
        </li>
      </ul>
    </li>
  </ul>    

  <h4>Outputs</h4>
  <ul ng-repeat="(key,value) in inputs">
    <li>{{key}} : {{outputs[key]}}</li>
  </ul>
</div>

<强> JavaScript的：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.outputs = {};
  $scope.inputs = {
    'category': ['one','two','three'],
    'color':['blue','green']
  };
  $scope.setOutput = function(typeKey, $index, value) {
    $scope.outputs[typeKey] = $scope.outputs[typeKey] || [];
    $scope.outputs[typeKey][$index] = value;
  };
});

另一种解决方案

Live demo here (click).

首先，我使用ng-init动态添加从inputs到outputs的第一级属性。然后，您只需将ng-model和ng-checked属性设置为outputs中的正确位置。

<强>标记：

<div ng-app="myApp" ng-controller="myCtrl">
  <h3 >Dynamic data binding AngularJS</h3>
  <h4>Inputs</h4>
  <ul>
    <li 
      ng-repeat="(typeKey, typeVal) in inputs"
      ng-init="outputs[typeKey] = outputs[typeKey] || {}">
      <span>{{typeKey}} : </span>
      <ul>
        <li ng-repeat="value in typeVal">
          <label>{{value}}
            <input
              type="checkbox"
              ng-model="outputs[typeKey][value]"
              ng-checked="outputs[typeKey][value]"
              value="outputs[typeKey][value]"
            >
          </label>
        </li>
      </ul>
    </li>
  </ul>    

  <h4>Outputs</h4>
  <ul ng-repeat="(key,value) in inputs">
    <li>{{key}} : {{outputs[key]}}</li>
  </ul>
</div>

<强> JavaScript的：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.outputs = {};
  $scope.inputs = {
    'category': ['one','two','three'],
    'color':['blue','green']
  };
});

Answer 2

您需要绑定父级的值，因为复选框不能像那样工作。这是一个例子：

<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
    <h4>Inputs</h4>
    <ul ng-repeat="(parent, values) in inputs">
        <span>{{parent}} : </span>
        <li ng-repeat="value in values"><label>{{value}}
            <input type="checkbox" ng-model="output[parent][value]" ng+checked="output[parent][value]" value="value" >                               
            </input></label>
        </li>
    </ul>    

    <h4>Outputs</h4>
    <ul ng-repeat="(key,value) in inputs">
        <li>
            {{key}} : {{output[key]}}
        </li>
    </ul>
</div>

在控制器中预先创建键

function Controller($scope) {
    $scope.output = { 'category': {}, color: {} };
    $scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}

jsfiddle ：http://jsfiddle.net/5eeVc/

Answer 3

看看这个插件，我已经处理了两种不同的场景。只是将其作为知识文章分享

Plunk

      <h3>First Scenario <small>Handling JSON source </small></h3>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h4>Available options</h4>
        <div ng-repeat="item in itemList">
          <mark>{{item.name}}</mark>
          <input type="checkbox" ng-model="modelContainer[$index].checked" />
        </div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h4 class="text-success">Selected options</h4>
        <ul>
          <li ng-repeat="item in modelContainer | filter: {checked:true}">
            {{item.item.name}} <a href="#" class="cl" ng-click="uncheck(item.item.id)">X</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <br>

  <p class="text-danger">itemList</p>
  <code>{{itemList}}</code>
  <br>
  <br>
  <p class="text-danger">modelContainer</p>
  <code>{{modelContainer}}</code>

  <hr>
  <h3>Second Scenario <small>Handling map Source </small></h3>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h4>Available options</h4>
        <div ng-repeat="item in Maplist">
          <mark>{{item}}</mark>
          <input type="checkbox" ng-model="modelContainer1[$index].checked" />
        </div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h4 class="text-success">Selected options</h4>
        <ul>
          <li ng-repeat="item in modelContainer1 | filter: {checked:true}">
            {{item.name}} <a href="#" class="cl" ng-click="uncheck1(item.id)">X</a>
          </li>`enter code here`
        </ul>
      </div>
    </div>
  </div>

如果选中，则对象的AngularJS数据绑定复选框

3 个答案:

另一种解决方案