使用 AngularJS 跟踪当前选定的项目
Posted
技术标签:
【中文标题】使用 AngularJS 跟踪当前选定的项目【英文标题】：Tracking current selected item with AngularJS 【发布时间】：2013-01-08 07:39:39 【问题描述】：我是 AngularJS 的新手，找不到任何合适的答案。我的应用程序当前包含通过 Angular 显示的项目列表。还有一个显示当前选中项名称的标签，以及一个允许修改当前选中项名称的输入框。
我不知道如何同时：
-
允许选择某项，触发更新标签和输入框文字显示新选择项的名称
允许编辑输入框中的名称触发更新显示当前显示的项目名称的标签
对名称的修改应反映在原始模型项中
目前，我正在尝试通过针对该项目的标志来跟踪哪个项目是当前的，但这并没有达到我想要的效果。理想情况下，我会将下面的currentItem 替换为直接引用items 中的项目isCurrent=true。
当前项目名称标签：
`<div id="CurrentItem" data-ng-model="currentItem">currentItem.name</div>`
当前项目名称输入框：
`<input id="ItemName" type="text" data-ng-model="currentItem" value="currentItem.name" />`
显示所有项目：
<div data-ng-repeat="item in items" data-ng-click="changeItem(item)">`
<img src="images/ItemIcon.png">
<div>item.name</div>
控制器：
var CoreAppController = function($scope, $location)
$scope.changeItem = function(item)
var length = $scope.items.length;
while(length-- )
$scope.items[length].isCurrent = false;
$scope.currentItem = item;
$scope.items.indexOf(item).isCurrent = false;
$scope.createItem = function(name, layout)
$scope.items.push( id: $scope.items.length + 1,
name: name,
isCurrent: false
);
// Initialisation
$scope.items = [];
$scope.createItem("Item 1");
$scope.createItem("Item 2");
$scope.items[0].isCurrent = true;
$scope.currentItem = $scope.items[0];
任何建议表示赞赏！
【问题讨论】：
【参考方案1】：我不确定您当前的代码but here is a mock up that does what it appears you're requesting。
JS
app.controller('MainCtrl', function($scope)
$scope.items = [
name: 'foo' ,
name: 'bar' ,
name: 'test'
];
$scope.editing = null;
$scope.editItem = function(item)
$scope.editing = item;
);
和标记
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items">
item.name
<a ng-click="editItem(item);">edit</a>
</li>
</ul>
<div ng-show="editing">
<input type="text" ng-model="editing.name"/>
<span>editing.name</span>
</div>
</body>
希望这会有所帮助。如果您需要更多描述，请告诉我。
【讨论】：
太好了，谢谢。只是表明当你真的不知道自己在做什么时，它很容易过度复杂化！以上是关于使用 AngularJS 跟踪当前选定的项目的主要内容，如果未能解决你的问题，请参考以下文章
在 AngularJS 中使用 angular.forEach 实现异步等待