angularjs的select使用2

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/stit/p/6367826.html

文章标签：

#javascript #ViewUI

本文通过两个实例展示了如何在AngularJS应用中使用ng-model和ng-options指令创建下拉选择框。第一个实例展示了如何从$scope.colors数组中选择颜色，并将选中的颜色对象赋值给$m变量。第二个实例则展示了一个更简单的选择框，用于从$data数组中选择项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://cnodejs.org/topic/549007b44823a0234c9e1716

myAppModule.controller('FrmController', ['$scope',function($scope){
 $scope.colors = [{name:'black', shade:'dark'},{name:'white', shade:'light'},{name:'red', shade:'dark'},{name:'blue', shade:'dark'},{name:'yellow', shade:'light'}];
 $scope.myColor = 'red';}]);

</select>

</form>

----------------------------

$scope.m = $scope.colors[0];
<select ng-model="m" ng-options="***color ***as color.name for color in colors"> 这样居然可以一次获取到 color 对象的全部属性值；

http://zhidao.baidu.com/link?url=2telKhWFeDNZQBLd37W0pmyPqw2cq3Uc5tIS1M_JIQi1dxdCr1XR3hm69mY4tjXf56E5AnhSwG1mdABw7YMFpCp08V7F-JaCO3zXkQRjvqu

       <!doctype html>
      

       <
       html
       >
      

       <
       head
       >
      

       <
       meta 
       charset
       =
       "UTF-8"
       >
      

       <
       title
       >test</
       title
       >
      

       <
       script 
       type
       =
       "text/javascript" 
       src
       =
       "angular.min.js"
       ></
       script
       >
      

       <
       script
       >
      

       var myApp = angular.module("myApp", []);
      

       myApp.controller("testCtrl", function($scope){
      

           
       $scope.data = [{id:1,value:'hello'},{id:2,value:'bye'},{id:3,value:'hmmmm'}];
      

           
       //$scope.selectValue = $scope.data[0].id;
      

       });
      

       </
       script
       >
      

       </
       head
       >
      

        
      

       <
       body 
       ng-app
       =
       "myApp"
       >
      

       <
       form 
       ng-controller
       =
       "testCtrl"
       >
      

         
       <
       select 
       ng-model
       =
       "selectValue" 
       ng-options
       =
       "item.id as item.value for item in data"
       ></
       select
       ><
       br 
       /><
       br 
       />
      

         
       <
       div 
       ng-switch
       =
       "selectValue"
       >
      

           
       <
       div 
       ng-switch-when
       =
       "1"
       >hello</
       div
       >
      

           
       <
       div 
       ng-switch-when
       =
       "2"
       >bye</
       div
       >
      

           
       <
       div 
       ng-switch-when
       =
       "3"
       >hmmmm</
       div
       >
      

           
       <
       div 
       ng-switch-default>ah?</
       div
       >
      

         
       </
       div
       >
      

       </
       form
       >
      

       </
       body
       >
      

       </
       html
       >
      