Угловой выберите "трек по" сбрасывает выбранный

Я изо всех сил пытаюсь заставить "selected" работать с "track by" для углового элемента select. У меня есть следующий выбор:

    <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 работает, когда я избавляюсь от "track by key" - первоначальный выбор становится предустановленным. При "отслеживании по ключу" предварительный выбор остается пустым. Мне нужно "отследить по ключу", чтобы получить выбранное значение, это единственное, что до сих пор работало. До сих пор я пробовал следующую комбинацию, которая не работала:

/*
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);     
*/

Я буду очень признателен за помощь здесь, чтобы заставить его работать. Спасибо.

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>
Другие вопросы по тегам