2017-01-04 36 views
0

ng-model nameを動的に割り当てようとしていますので、ng-modelの名前に '$ scope.numbers.no1'、 '$ scope.numbers .no2 'などとなります。私のコントローラで接頭辞付きの動的クラス名

<div ng-repeat="row in numbersArray" class="numbersRow"> 
    <div ng-repeat="num in row" class="number" ng-model="numbers['no' + num]">{{num}}</div>   
</div> 

: は、これまでのところ、私は結果なしでこのコードをしようとしています

$scope.numbers = {}; 
$scope.numbersArray = [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
         [11, 12, 13, 14, 15, 16, 17, 18, 19, 20], 
         [21, 22, 23, 24, 25, 26, 27, 28, 29, 30], 
         [31, 32, 33, 34, 35, 36, 37, 38, 39, 40], 
         [41, 42, 43, 44, 45, 46, 47, 48, 49, 50], 
         [51, 52, 53, 54, 55, 56, 57, 58, 59, 60], 
         [61, 62, 63, 64, 65, 66, 67, 68, 69, 70], 
         [71, 72, 73, 74, 75, 76, 77, 78, 79, 80]]; 

と私は実行していますテストする:

$scope.numbers.no1 = 'A'; 

をしかし、何も起こりません。私はここで間違って何をしていますか?

更新日: 私が考え出したのは、誤ってdivのモデルを使用しようとしていることです。 私が達成しようとしているのは、80個の数字の中からランダムな数字を選び、選択されたことを示すために背景色を黒にすることです。

+0

... – Mistalis

+1

まあ、 'div'のカント:それはあなたが探しているものであるホープngModelを持っている – tymeJV

+0

そうでなければ、 'div'に' ng-model'を使うことはできません。これは、入力、選択、テキストエリア(またはカスタムフォームコントロール)のみをバインドします。 – Mistalis

答えて

1

https://plnkr.co/edit/vT6sU9XnYJsov4q7euwK?p=preview

<div ng-repeat="row in numbersArray" class="numbersRow"> 
    <div ng-repeat="num in row" ng-class="{'clickedNumber': numbers[num]}" 
     ng-click="numbers[num] = !numbers[num]" class="number">{{num}}</div>   
</div> 
+0

ありがとう、混乱のために申し訳ありません。私は間違ってdivにモデルを使用しようとしました... – papakias

+0

それは完璧に動作します...もう一度ありがとう! – papakias

0

上記のコードは$scope.numbersArrayをループし、$scope.numbers(キーは入力値)に入れます。私はあなたが達成しようとしているのか理解していない

<div ng-repeat="row in numbersArray"> 
    <div ng-repeat="num in row"> 
    <input ng-model="numbers['no' + num]" /> {{num}} 
    </div> 
</div> 

Demo on JsFiddle

+0

あなたの返事をありがとう、私は私の心の中で非常に異なったことがあり、私はあなたに私のモデルモデルのアプローチで少し誤解していると思う。 – papakias

関連する問題