角度选择 'track by' 重置选择答案

【问题标题】：angular select 'track by' resets selected角度选择 'track by' 重置选择
【发布时间】：2016-09-29 21:30:43
【问题描述】：

我正在努力获得“选择”以使用 Angular 选择元素的“跟踪依据”。我有以下选择：

    <select id="licenseType" ng-model="selectedLicense" 
            ng-options="key for (key, value) in licenseMap track by key" 
            ng-change="doUpdate()">
    </select>

用这个js：

$scope.selectedLicense = $scope.licenseMap["Please Select"];

当我摆脱“按键跟踪”时，上面的 js 工作 - 初始选择被预设。使用“按键跟踪”，预选是空白的。我需要“按键跟踪”来获取选定的值，这是迄今为止唯一有效的方法。到目前为止，我已经尝试过以下组合但不起作用：

/*
var license = document.getElementById('licenseType');
license.options.selectedIndex = 1;
license.options[license.options.selectedIndex].selected = true;
$("#licenseType").val("Please Select");
$('#licenseType').children('option[value="1"]').attr('selected', true);     
*/

我将不胜感激这里的一些帮助，让它发挥作用。谢谢。

【问题讨论】：

为什么需要track by？在 doUpdate() 中，您应该能够访问 selectedLicense 并在此处获取所选值。
@user2917629: 我的 select 是一个多维数组，track-by 是获取所选键的唯一技巧，否则我会返回数组

标签： angularjs select angularjs-track-by

【解决方案1】：

做这样的事情：http://codepen.io/alex06/pen/XjarJd

div(data-ng-app="app")
 div(ng-controller="appController")
   select.form-control(ng-model="selectedItem", ng-options="option.value as option.name for option in typeOptions track by option.value" ng-init="selectedItem=typeOptions[0]")


(function(){
  'use strict'
  angular
    .module('app', [])
    .controller('appController', ['$scope', function($scope){

      $scope.typeOptions = [
        { name: 'Feature', value: 'feature' }, 
        { name: 'Bug', value: 'bug' }, 
        { name: 'Enhancement', value: 'enhancement' }
       ];
    }])
})()

这个例子是用jade做的，但语法几乎一样。顺便说一句，如果你仍然想使用对象而不是数组，你也可以这样做：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">              </script>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript">
    angular.module('app', [])
      .controller('IndexCtrl', ['$scope', function($scope) {
        $scope.types = {
          1: "value1",
          2: "value2",
          5: "value3"
        };
      }]);
    </script>
  </head>
  <body ng-app="app" ng-controller="IndexCtrl">
    <select ng-model="type" ng-options="k as v for (k, v) in types">
      <option value="">Please select</option>
    </select>
  </body>

</html>

【讨论】：

我刚刚用我自己的数据引用尝试了 ng-init="selectedItem=typeOptions[0]"，但仍然没有运气。
请注意，我上传的示例使用的是数组，我相信您的示例使用的是普通对象。这就是为什么我上传了一个带有数组的笔，然后是另一个带有对象的笔，如果您只需要选择一个没有值的默认选项，请使用我的第二个示例。
我尝试在选择中使用和 ng-init，但他们没有预先选择，我猜是因为我正在使用多维数组。