在输入类型复选框中绑定 ng-models答案

【问题标题】：Bind ng-models in input type checkbox在输入类型复选框中绑定 ng-models
【发布时间】：2014-02-21 01:28:23
【问题描述】：

在输入标签类型复选框中将 ng-models 与 ng-repeat 绑定时遇到问题。我先附上我的代码，然后再详细解释。

app/main.html:

<div ng-repeat="feature in features">
   <input type="checkbox" ng-model="features[$index].name">{{features[$index].name}}
</div>
<br></br>
  <div class="highlighter">
     <span ng-class="{emo:Emotions}">Manually</span> <span ng-class="{feel:Feelings}">create</span> the <span ng-class="{emo:Emotions}">entire</span>
  </div>

main.js

angular.module('webClientApp')
    .controller('MainCtrl', function ($scope,$http) {

       [...other variables...]

       $scope.features = [{'name':'Emotions'},{'name':'Feelings'}];

[...other parts of code]
});

我们还假设在 main.css 文件中分别引用了 .emo' and.feel' 类，以在用户勾选与该功能相关的框时突出显示目标词。

现在，当我一一列出所有输入时，应用程序可以正常工作，如下所示：

<input type="checkbox" ng-model="Emotions">Emotions
<input type="checkbox" ng-model="Feelings">Feelings

但我想将它包装成一个 ng-repeat 并列出控制器范围内的功能，因为我将考虑的功能会更多。当我在框上打勾时尝试上面的代码时，名称更改为“true”。

我已经阅读了很多关于如何将模型绑定到输入标签内的 ng-repeat，但没有一个解决方案适用于我的案例。有人可以帮帮我吗？

【问题讨论】：

ng-model 需要设置为您想要“true”或“false”的属性，以判断该框是否被选中（或自定义 true 或 false 值）。不要在 ng-model 上设置你的名字。查看文档。 docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D 尝试将 ng-model 设置为 features[$index].selected。

标签： javascript html angularjs checkbox angular-ngmodel

【解决方案1】：

我对您的原始模型进行了相当多的更改，但是...我确实得到了一些行为类似于您正在寻找的东西。

HTML

<div ng-app="webClientApp">
<div ng-controller="MainCtrl">
    <div ng-repeat="(feature,enabled) in features">
        <input type="checkbox" ng-model="features[feature]">{{feature}}</input>
    </div>
      <div class="highlighter">
         <span ng-class="{emo:features.Emotions}">Manually</span> <span ng-class="{feel:features.Feelings}">create</span> the <span ng-class="{emo:features.Emotions}">entire</span>
      </div>
    {{features}}<br>
    {{features.Emotions}}<br>
    {{features.Feelings}}
</div>

var app = angular.module('webClientApp', []);
app.controller('MainCtrl', function($scope, $http) {
    $scope.features = {Emotions: true, Feelings: true};
});

这是小提琴：http://jsfiddle.net/rodhartzell/8YrxQ/

希望这会有所帮助。

【讨论】：

谢谢，这就是我要找的！

【解决方案2】：

（我应该将此添加为评论，但我还没有足够的代表。） github上有一个问题与您的问题有关：https://github.com/angular/angular.js/issues/1404 caitp 的评论显示了一些解决方法：https://github.com/angular/angular.js/issues/1404#issuecomment-30859987

您可以（也）在控制器中定义一个新的 javascript 对象并将元素映射到该对象。

在控制器中：$scope.awnsers = {};

在模板中：ng-model="awnsers[feature.name]"

希望对你有帮助

【讨论】：

【解决方案3】：

您必须使用ng-checked 而不是ng-model。

看看这个 jsfiddle

http://jsfiddle.net/fizerkhan/z5z9s/24/

ngModel 和 ngChecked 不能一起使用。

ngChecked 期待一个表达式，所以说ng-checked="master"。如果表达式为真，则将在元素上设置特殊属性“checked”

您应该可以只使用ngModel，绑定到模型上的布尔属性。如果你想要别的东西，那么你要么需要使用 ngTrueValue 和 ngFalseValue（现在只支持字符串），要么编写你自己的指令。

【讨论】：