1

入力タグタイプのチェックボックスで ng-models を ng-repeat にバインドするときに問題が発生します。最初にコードを添付してから、さらに詳しく説明します。

アプリ/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' への参照がそれぞれあると仮定します。

これで、次のようにすべての入力を 1 つずつリストすると、アプリケーションは正しく動作します。

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

しかし、これを ng-repeat にラップして、コントローラー スコープ内の機能をリストしたかったのです。ボックスにチェックマークを付けて上記のコードを試すと、名前が「true」に変わります。

入力タグ内でモデルを ng-repeat にバインドする方法について多くのことを読みましたが、私の場合には解決策はありません。誰か助けてくれませんか？

4

3 に答える 3

0

私はあなたの元のモデルからかなり変更しましたが...あなたが探しているものと同様に動作するものを手に入れました。

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/

お役に立てれば。

于 2014-02-20T17:22:50.257 に答える