[英]ng-selected not updating the dropdown angularjs
我一直在AngularJS中工作,当执行以下功能时,我仍然得到一个空选项作为select元素的第一个子元素。
这是我的HTML代码段
<select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs.index" ng-change="onChangeMethod(connectTVs.index)" class="selector" aria-required="true">
<option ng-repeat="noOfTV in noOfTVs" ng-value="noOfTV.index" ng-selected="noOfTV.index == connectTVs.index">{{noOfTV.value}}</option>
</select>
JS代码
$scope.noOfTVs = [
{index: 0, value: 'How many Dish TVs?'},
{index: 1, value: 'Connect 1 Dish TV'},
{index: 2, value: 'Connect 2 Dish TVs'},
{index: 3, value: 'Connect 3 Dish TVs'},
{index: 4, value: 'Connect 4 Dish TVs'},
{index: 5, value: 'Connect 5 Dish TVs'},
{index: 6, value: 'Connect 6 Dish TVs'},
{index: 7, value: 'Connect 7 Dish TVs'},
{index: 8, value: 'Connect 8 Dish TVs'}
];
$scope.onChangeMethod = function(connectTVsIndex) {
// Doing some actions
$scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
$window.sessionStorage.setItem("noOfTVSelected", $scope.connectTVs.index);
}
最后,这是生成的HTML,其中包含
<option value="? number:4 ?"></option>
将空选项作为select元素的第一个子元素。 我在哪里做错了? 有人可以帮忙吗?
您可以将ng-options
用于select而不是ng-repeat
。 前者对于较大的阵列集具有更好的性能 ,并提供了更大的灵活性。
var app = angular.module('myApp', []) app.controller('myCtrl', [ '$scope', function($scope) { $scope.noOfTVs = [{ index: 0, value: 'How many Dish TVs?' }, { index: 1, value: 'Connect 1 Dish TV' }, { index: 2, value: 'Connect 2 Dish TVs' }, { index: 3, value: 'Connect 3 Dish TVs' }, { index: 4, value: 'Connect 4 Dish TVs' }, { index: 5, value: 'Connect 5 Dish TVs' }, { index: 6, value: 'Connect 6 Dish TVs' }, { index: 7, value: 'Connect 7 Dish TVs' }, { index: 8, value: 'Connect 8 Dish TVs' }]; $scope.connectTVs=$scope.noOfTVs[0]; $scope.onChangeMethod = function() { // Doing some actions console.log($scope.connectTVs) } } ])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs" ng-change="onChangeMethod()" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs"> </select> </div> </div>
这是因为你的初始绑定ngModel
你的select
是不确定的。
ng-model="connectTVs.index
$ scope.connectTVs不存在!
满足您问题的最快解决方案是添加:
$scope.connectTVs = {
index: 0,
$ scope.onChangeMethod = function(connectTVsIndex){
// Doing some actions
$scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
$window.sessionStorage.setItem("noOfTVSelected", $scope.connectTVs.index);
最后,这是生成的HTML,其中包含
在此处输入图片说明
将空选项作为select元素的第一个子元素。 我在哪里做错了? 有人可以帮忙吗?
value: 'How many Dish TVs?'
}
但是我要补充一点,鉴于可以使用$index
在视图中访问它,因此在这种对象中添加index属性是没有用的。
工作演示: https : //plnkr.co/edit/mmD4mVUNxLr9sbojrCKc?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.