gpt4 book ai didi

angularjs - 使用 AngularJS 跟踪当前选定的项目

转载 作者:行者123 更新时间:2023-12-04 01:47:11 26 4
gpt4 key购买 nike

我是 AngularJS 的新手,找不到任何合适的答案。我的应用程序当前包含通过 Angular 显示的项目列表。还有一个显示当前选中项名称的标签,以及一个允许修改当前选中项名称的输入框。

我无法弄清楚的是如何同时:

  • 允许选择一个项目,触发更新标签和输入框文本以显示新选择的项目名称
  • 允许编辑输入框中的名称,触发更新显示当前显示的项目名称的标签
  • 对名称的编辑应反射(reflect)在原始模型项


  • 目前,我正在尝试通过针对该项目的标志来跟踪哪个项目是当前的,但这不是我想要的。理想情况下,我会替换 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>

    Controller :
    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>

    希望这有帮助。如果您需要更多描述,请告诉我。

    关于angularjs - 使用 AngularJS 跟踪当前选定的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14503210/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com