使用AngularJS跟踪当前所选项目
发布时间:2020-12-17 09:27:21 所属栏目:安全 来源:网络整理
导读:我是新来的AngularJS,找不到任何合适的答案.我的应用程序目前由通过Angular显示的项目列表组成.还有一个显示当前所选项目的名称的标签,以及允许修改当前所选项目名称的输入框. 我无法想像的是如何同时进行: 允许选择项目,触发更新标签和输入框文本以显示新
我是新来的AngularJS,找不到任何合适的答案.我的应用程序目前由通过Angular显示的项目列表组成.还有一个显示当前所选项目的名称的标签,以及允许修改当前所选项目名称的输入框.
我无法想像的是如何同时进行: >允许选择项目,触发更新标签和输入框文本以显示新选择的项目的名称 目前,我正在尝试通过一个标志来跟踪哪个项目是最新的,而这并不是我想要的.理想情况下,我将使用isCurrent = true的项目直接引用项目来替换下面的currentItem. 当前项目名称标签: `<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]; } 任何建议赞赏!
我不知道你当前的代码,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> 希望有帮助.如果您需要更多描述,请告知我们. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |