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

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

  •  1
  • 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 年前
        1
  •  1
  •   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>
        2
  •  0
  •   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

        3
  •  0
  •   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>