我是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];
}
任何建议赞赏!
Ben*_*esh 18
我不确定你当前的代码,但这里是一个模拟,它会显示你正在请求的内容.
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>
希望这会有所帮助.如果您需要更多描述,请告诉我.
| 归档时间： |
|
| 查看次数： |
23469 次 |
| 最近记录： |