为什么我的角度选项无法按 ID 跟踪

why isn't my angular options track by id working

本文关键字：ID 跟踪 选项 我的 为什么      更新时间：2023-09-26

我确定我一定做错了，但是：

我有一个存储项目 id 的对象。 我也有一系列这些项目。 我需要有一个"选择"来表示当前选定的项目，但它也可以更改所选项目。

我已经将"选择"模型设置为对象.selectId。"选择"ng选项是"选项"。选项中的选项文本按选项ID跟踪">

然而，模型和"选择"选项类型不匹配

我如何实现我需要的？

这是我正在做的事情的小提琴：https://jsfiddle.net/vb2xe1mc/5/

法典：

<script>
angular.module('myApp', [])
  .controller('myctrl', ['$scope', function($scope) {
    $scope.item = {
      id: 1
    };
    $scope.options = [
      {Text: "zero",  Id: 0}, 
      {Text: "one",   Id: 1}, 
      {Text: "two",   Id: 2}, 
      {Text: "three", Id: 3}
    ];
    $scope.selectChange = function() {
      alert($scope.item.id);
    };
  }]);
</script>
<div ng-app="myApp">
   <div ng-controller="myctrl">
       <select ng-model="item.id" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
       </select>
   </div>
</div>

如果可以，请让我知道我哪里出错了或纠正小提琴。

谢谢 ^_^安 迪

澄清：模型项的 ID 已选定 1。在这种情况下，我需要列表来预先选择 id 为 1 的选项。此外，选择该选项时，它不会将 item.id 设置为 int，而是将其设置为整个选项项。 我需要它将 item.id 设置为该选项。编号

<select ng-model="item.id" ng-options="option.id as option.Text for option in options" ng-change='selectChange()'>

您要选择option.id，而不是option，并且不需要track by。

将选择绑定到ng-model="item"，而不是ng-model="item.id"。

还要决定id与 Id 

<div ng-app="myApp">
  <div ng-controller="myctrl">
    <select ng-model="item" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
    </select>
  </div>
</div>

angular.module('myApp', [])
  .controller('myctrl', ['$scope', function($scope) {
    $scope.item = {
      Id: 1
    };
    $scope.options = [{
      Text: "zero",
      Id: 0
    }, {
      Text: "one",
      Id: 1
    }, {
      Text: "two",
      Id: 2
    }, {
      Text: "three",
      Id: 3
    }, ];
    $scope.selectChange = function() {
    console.log ($scope.item.Id)
      alert($scope.item.Id);
    };
  }]);

有关固定版本，请参阅此处：https://jsfiddle.net/ax3k418p/

> https://jsfiddle.net/vb2xe1mc/10/

您需要将item绑定到ng-model，并且初始$scope.Id应设置为1而不是$scope.id = 1

还要检查何时发出警报，它应该alert($scope.item.Id); 

<div ng-app="myApp">
  <div ng-controller="myctrl">
    <select ng-model="item" ng-options="option.Text for option in options" ng-change='selectChange()'>
    </select>
  </div>
</div>

.JS：

angular.module('myApp', [])
  .controller('myctrl', ['$scope', function($scope) {
    $scope.item = {
      Id: 1
    };
    $scope.options = [{
      Text: "zero",
      Id: 0
    }, {
      Text: "one",
      Id: 1
    }, {
      Text: "two",
      Id: 2
    }, {
      Text: "three",
      Id: 3
    }, ];
    $scope.selectChange = function() {
      alert($scope.item.Id);
    };
  }]);
相关文章：