如果选中AngularJS的数据绑定复选框对象 [英] AngularJS data binding checkboxes to object if checked
问题描述
我有我与吴重复重复一个JSON对象,键是字符串,值是一个数组。我列出的每个值作为一个复选框。我想创建一个仅包含选中的复选框列表的第二个对象。我想preserve对象的结构,键和值。
I have a JSON object which I am repeating with ng-repeat, the keys are strings, and the values are an array. I am listing each of the values as a checkbox. I would like to create a second object which contains a list of only the checkboxes that are checked. I want to preserve the structure of the object with keys and values.
我不确定如何正确此绑定到一个模型,使结构preserved。
I'm unsure how to bind this to a model properly so that the structure is preserved.
这是我的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']};
}
有一些简单的方法来做到这一点?我有我失去了一些东西轻微的感觉,这将均能正常工作。
Is there some simple way to do this? I have the feeling that I'm missing something minor and this will all work nicely.
推荐答案
我的例子有你在推荐语法角度逻辑(非全局)。也有与您的标记,我已经改正了几个问题。
My examples have your angular logic in the recommended syntax (non-global). There were also several issues with your markup that I have corrected.
在这个例子中, NG-模式=X
是我不使用一个占位符,但 NG-模型
必须是present或引发错误。我使用 NG-变化
来处理复选框之间的联系和 $ scope.outputs
。
In this example, ng-model="x"
is a placeholder that I don't use, but ng-model
must be present or an error is thrown. I am using ng-change
to handle the link between the checkboxes and $scope.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">
<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;
};
});
另一个解决方案
这里首先,我用 NG-INIT
来动态地从输入
添加一级属性输出
。然后你只需要设置你的 NG-模型
和 NG-检查
属性到正确的位置在输出
。
First, I used ng-init
to dynamically add the first-level properties from inputs
to outputs
. Then you just needed to set your ng-model
and ng-checked
properties to the correct location in 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']
};
});
这篇关于如果选中AngularJS的数据绑定复选框对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!