代码之家 › 专栏 › 技术社区 › iJade

从“选择”下拉列表中删除空项angularjs

angularjs javascript

iJade · 技术社区 · 7 年前

代码如下:

    <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}
                ];

            }]);

这是一个 DEMO

3 回复 | 直到 7 年前

Srinivas ML 7 年前

制作 $scope.selected = 1; 像 $scope.selected = "1";

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>

Ankit Agarwal 7 年前

你需要包括 ng-repeat <select> 像这样标记

<html>
  <head>
  </head>
  <body ng-app="app">
    <div ng-controller="homeCtrl">
      <select ng-model="selected" ng-options="value.id as value.name
                                           for (key,value) in items"
  ></select>
      <span>
        {{selected}}
      </span>
    </div>
  </body>
</html>

CODEPEN

Sajeetharan 7 年前

 ng-options="value.id as value.name for (key,value) in items"

演示

var app = angular.module('app',[]);
			app.controller('homeCtrl',['$scope',function($scope){
  		$scope.items=[
					{name: 'harry111',id:1},
					{name: 'rimmi',id:2}
				];
				   $scope.selected = $scope.items[0].id;
}]);

<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" ng-options="value.id as value.name
                                           for (key,value) in items"
  ></select>
      <span>
        {{selected}}
      </span>
    </div>
  </body>
</html>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前