从选择下拉的angularjs中删除空项目 [英] Remove empty item from select drop down angularjs
本文介绍了从选择下拉的angularjs中删除空项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用AngularJS ng-repeat指令绑定数据以选择下拉列表，但是在页面加载时显示为空数据.如何删除空项目.这是代码:
I'm trying to bind data to select drop down using AngularJS ng-repeat directive but it's showing an empty data on page load. How to remove the empty item. Here is the code:
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected">
<option ng-repeat="item in items" value="{{item.id}}">
{{item.name}}
</option>
</select>
<span>
{{selected}}
</span>
</div>
</body>
</html>
这是JS代码:
var app = angular.module('app',[]);
app.controller('homeCtrl',['$scope',function($scope){
$scope.selected = 1;
$scope.items=[
{name: 'harry111',id:1},
{name: 'rimmi',id:2}
];
}]);
这是一个演示
推荐答案
将 $ scope.selected = 1; 设为 $ scope.selected ="1"; 将默认选择一个值
make $scope.selected = 1; as $scope.selected = "1"; it will default select a value
var app = angular.module('app',[]);
app.controller('homeCtrl',['$scope',function($scope){
$scope.selected = "1";
$scope.items=[
{name: 'harry111',id:1},
{name: 'rimmi',id:2}
];
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected">
<option ng-repeat="item in items" value="{{item.id}}">
{{item.name}}
</option>
</select>
<span>
{{selected}}
</span>
</div>
</body>
</html>这篇关于从选择下拉的angularjs中删除空项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
