0

私の angular.js プロジェクトには、入力フィールドを含むループがあります

<input type="text" ng-model="myColour">
<div ng-repeat="c in colors">
    <input type="text" ng-model="colour">
    <a href ng-click="asd(colour)">Click</a>
</div>

ユーザーが入力フィールドの横にある「クリック」リンクをクリックすると、コントローラーのその入力フィールドにアクセスして、そのフィールド値を設定/取得したいと考えています。以下は私のコントローラーコードです

$scope.colors = [
    {id: 1, name: 'black', shade: 'dark'},
    {id: 2, name: 'white', shade: 'light'},
    {id: 3, name: 'red', shade: 'dark'},
    {id: 4, name: 'blue', shade: 'dark'},
    {id: 5, name: 'yellow', shade: 'light'}
];

$scope.asd = function(data){
    console.info(data);
    console.info($scope.myColour);
    console.info($scope.colour);
};

これは私に与える

colour input field data
my colour input field data
undefined

ここで、ビューで繰り返されると「色」モデルにアクセスできません。そこで、ランダムなモデル名を生成しようとしました (c.id とモデルの色を連結します)。これを達成するためにいくつかの方法を試しましたが、うまくいきませんでした。

ランダムな ng-model 名を生成する方法はありますか?

また

「クリック」リンクがクリックされた入力フィールドのモデルにアクセスする方法はありますか?

4

1 に答える 1

1

このようなことを試してください：

<div ng-repeat="c in colors">
    <input type="text" ng-model="c.colour">
    <a href ng-click="asd(c.colour)">Click</a>
</div>

JSで：

// your collection
$scope.colors = [
    {id: 1, name: 'black', shade: 'dark'},
    {id: 2, name: 'white', shade: 'light'},
    {id: 3, name: 'red', shade: 'dark'},
    {id: 4, name: 'blue', shade: 'dark'},
    {id: 5, name: 'yellow', shade: 'light'}
];

// add a new key called 'colour' on your colors which will be the model
angular.forEach($scope.colors, function(value, key){
   $scope.colors[key]['colour'] = ""; // match node in html
});
于 2014-04-30T15:03:04.837 に答える