AngularJS代替使用兩個ng顯示和兩個下拉菜單我可以使用一個下拉菜單

-1

我想使用1個需要滿足這兩個條件的下拉菜單。AngularJS代替使用兩個ng顯示和兩個下拉菜單我可以使用一個下拉菜單

<div ng-show="user == 'admin'"> 
    <div class="col-md-8 col-sm-12 col-xs-12"> 
     <select ng-model="li" > 
      <option ng-repeat="li in list">{{li.name}}</option> 
     </select> 
    </div> 
</div> 

<div ng-show="user != 'admin'"> 
    <div class="col-md-8 col-sm-12 col-xs-12"> 
     <select ng-model="li" > 
      <option ng-repeat="li in list|limitTo:1">{{li.name}}</option> 
     </select> 
    </div> 
</div>

code in plunker

來源

2017-04-14 user7360

你可以嘗試這樣的：

<div ng-if="user == 'admin'"> 
     <div class="col-md-8 col-sm-12 col-xs-12"> 
      <select ng-model="li"> 
       <option ng-repeat="li in list">{{li.name}}</option> 
      </select> 
     </div> 
    </div> 
    <div ng-if="user != 'admin'"> 
     <div class="col-md-8 col-sm-12 col-xs-12"> 
      <select ng-model="li"> 
        <option ng-repeat="li in list" ng-if="$first">{{li.name}}</option> 
      </select> 
     </div> 
    </div>

，而不是使用ng-show和ng-if使用ng-if="$first"而不是把limitTo:1過濾器。

這裏是更新plunker網址：http://plnkr.co/edit/Cwc9prHQrULCKY8UmbSE?p=preview

來源

2017-04-14 16:18:39

你可以嘗試過濾

`<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> 
    <script src="app.js"></script> 
    <script> 
     var app = angular.module('plunker', []); 
     app.controller('MainCtrl', function($scope) { 
     $scope.user="admin"; 
      $scope.list = [ 
      {id:1,name:"first",tc:100}, 
      {id:2,name:"second",tc:103}, 
      {id:3,name:"third",tc:105} 
     ] 
     console.log("hi"); 
     console.log($scope.modes); 
     $scope.filterrole=function(item){ 
      return $scope.user=="admin"?true:$scope.list[0]==item; 
     } 
     }); 
    </script> 
    </head> 
    <body ng-controller="MainCtrl"> 
    <div > 
    <div class="col-md-8 col-sm-12 col-xs-12"> 
         <select ng-model="li" > 
          <option value="">select {{user}}</option> 
          <option ng-repeat="li in list |filter: filterrole">{{li.name}}</option> 
         </select> 
        </div> 
        </div> 
        <br> 
        <div><input type="button" value="admin" ng-click="user='admin'"> 
        <input type="button" value="other" ng-click="user='other'"></div> 
    </body> 
</html>`

http://plnkr.co/edit/orL8oLOKSm7H4DJwXQyx?p=preview

來源

2017-04-14 18:35:10

AngularJS代替使用兩個ng顯示和兩個下拉菜單我可以使用一個下拉菜單

回答

相關問題