angular select 'track by' 重置 selected
angular select 'track by' resets selected
我正在努力让 "selected" 与 'track by' 一起用于 Angular select 元素。我有以下 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"];
当我摆脱 'track by key' 时,上面的 js 工作 - 初始 selection 得到预设。使用 'track by key' 前 selection 是空白的。我需要 'track by key' 来获取 selected 值,这是迄今为止唯一有效的方法。到目前为止,我已经尝试了以下组合但没有用:
/*
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);
*/
我将非常感谢您的帮助,让它开始工作。谢谢。
做这样的事情: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 做的,但它几乎是一样的 syntax.By 方式,如果你仍然想使用对象而不是数组,你也可以这样做:
<!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>
我正在努力让 "selected" 与 'track by' 一起用于 Angular select 元素。我有以下 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"];
当我摆脱 'track by key' 时,上面的 js 工作 - 初始 selection 得到预设。使用 'track by key' 前 selection 是空白的。我需要 'track by key' 来获取 selected 值,这是迄今为止唯一有效的方法。到目前为止,我已经尝试了以下组合但没有用:
/*
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);
*/
我将非常感谢您的帮助,让它开始工作。谢谢。
做这样的事情: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 做的,但它几乎是一样的 syntax.By 方式,如果你仍然想使用对象而不是数组,你也可以这样做:
<!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>