Question

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

应用程序/ 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。感觉'以突出显示目标字。

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

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

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

我已经阅读了很多关于如何将模型绑定到输入标记内的ng-repeat但很多解决方案都不适用于我的情况。有人可以帮助我吗？

Answer 1

（我应该将其添加为评论，但我还没有足够的代表。） 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]"

我希望这会有所帮助

Answer 2

您必须使用ng-checked代替ng-model。

查看这个jsfiddle

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

ngModel和ngChecked并不意味着一起使用。

ngChecked期待一个表达式，所以说ng-checked="master"。如果表达式是真实的，那么将在元素

上设置特殊属性“checked”

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

Answer 3

我从原来的模型中改变了很多但是......我确实得到的东西与你正在寻找的东西相似。

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>

JS

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

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

希望这有帮助。

在输入类型中绑定ng模型复选框

3 个答案: