美文网首页
select ng-options ng-show

select ng-options ng-show

作者: sunflower_07 | 来源:发表于2017-09-21 11:33 被阅读0次
    <!DOCTYPE html>
    <html>

    <head>
        <title></title>
    </head>

    <body ng-app="app" ng-controller="ctr">
      <select ng-options="item.name for item in  pattern" ng-model="patternActive" ng-change="patternClick()"></select>
      <div ng-show="index == 1">
        <h1>11111</h1>
      </div>
      <div ng-show="index == 2">
        <h1>22222</h1>
      </div>
      <div ng-show=" index == 3">
        <h1>33333</h1>
      </div>
    </body>
    <script src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
    <script>
        
     
     var app=angular.module('app',[]);
     app.controller('ctr',function($scope){
      //pattern 模式
      $scope.pattern=[{
        'name':'集中模式',
        'index':1
      },{
        'name':'调度模式',
        'index':2
      },{
        'name':'分散模式',
        'index':3
      }];
      $scope.patternActive=$scope.pattern[0]; 
      $scope.index=$scope.patternActive.index
      $scope.patternClick=function(){
      $scope.index= $scope.patternActive.index;
     }
     })
        </script>

    </html>

结果

image.png image.png

相关文章

网友评论

      本文标题:select ng-options ng-show

      本文链接:https://www.haomeiwen.com/subject/deszsxtx.html