テンプレートからバインディングを取り戻す方法はありますか?
言い換えれば、私がこのようなものを持っている場合:
<div ng-repeat="item in list">
<div>{{item.name}}</div>
<div>{{item.state}}</div>
</div>
繰り返されるdivは、アイテムがどのアイテムから作成されたかを「記憶」するため、アイテムをクリックしてアイテムの状態を変更することは可能でしょうか。
テンプレートからバインディングを取り戻す方法はありますか?
言い換えれば、私がこのようなものを持っている場合:
<div ng-repeat="item in list">
<div>{{item.name}}</div>
<div>{{item.state}}</div>
</div>
繰り返されるdivは、アイテムがどのアイテムから作成されたかを「記憶」するため、アイテムをクリックしてアイテムの状態を変更することは可能でしょうか。
はい、ng-click
ディレクティブを使用して、現在のスコープでメソッドをトリガーできます。
// In your view's controller:
function MyCtrl($scope, MyList) {
// You probably have something like that already to
// populate your list, using a $resource or $http GET call.
// Here I use a $resource which would be defined on your module.
$scope.list = MyList.query()
$scope.setState = function(state) {
// "this" refers to the current scope
this.item.state = state
}
}
// And in your view:
<div ng-repeat="item in list">
<div>{{item.name}}</div>
<div ng-click="setState('whatever')">{{item.state}}</div>
</div>
または、divに直接などの式を設定することもできますがng-click="item.state='whatever'"
、これはテスト可能性が低く(エンドツーエンドのテストでのみ)、柔軟性が低く、検証などを導入したい場合などです)。
HTH