Question

我有这个下拉列表

<label class="control-label">Type</label><br/>
 <select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
  <option value=""> Select Type</option>
 </select>

这是项目中的列表。

$dialogScope.items = [{
                name:"Pencil",
                value:"0",
            },{
                name:"Eraser",
                value:"1"
            },{
                name:"Colourpencil",
                value:"2",
            },{
                name:"Ruler",
                value:"4",
            },{
                name: "Pen",
                options : ["Blue","Red","Colourful"]
            },{
                name: "Laptop",
                options : ["Dell","Lenovo","Acer"]
            },{
                name: "Pencil Box",
                value:"7",
            },{
                name: "Download CACHE By GPU",
                value:"8",
            },
            ];

如果用户选择铅笔或橡皮擦或标尺或铅笔盒，则标签A和标签B字段将隐藏。我试过如下

 <div class="form-group has-feedback"  ng-if="type==0||type==1||type==4||type==7" ng-hide="hideField1">
  <label class="control-label">{{labelA}}</label>
   <input type="url" class="form-control" ng-model="stepA" name="stepA" required>
 </div>

 <div class="form-group has-feedback" ng-if="type==5||type==6||type==8||type==10" ng-hide="hideField2">
  <label class="control-label">{{labelB}}</label>
   <input type="url" class="form-control" ng-model="stepB" name="stepB" required>
 </div>

 <div class="form-group has-feedback" ng-if="type==0||type==4||type==7||type==5||type==6||type==8||type==9||type==10" ng-hide="hideField3">
  <label class="control-label">{{labelC}}</label>
   <input type="text" class="form-control" ng-model="stepC" name="stepC" required>
 </div>

并在控制器中使用它，但它不是正确的方式。有人注意到这个错误？如果有任何正确的方法来创建它。

已更新

$dialogScope.selectChange = function(selectedItem){
 if (selectedItem) {
  $dialogScope.type = selectedItem.value;
  $dialogScope.labelA = '';
  $dialogScope.labelB = '';
  $dialogScope.labelC = 'MD5';
  $dialogScope.stepA = '';
  $dialogScope.stepB = '';
  $dialogScope.stepC = '';
   if ($dialogScope.value == 0) {
     $dialogScope.labelA = "APK URL";
    } else if ($dialogScope.value == 4) {
     $dialogScope.labelA = "OBB URL";
    } else if ($dialogScope.value == 5) {
     $dialogScope.labelB = "OBB URL";
    } else if ($dialogScope.value == 6) {
     $dialogScope.labelB = "APK URL";
    }
   console.log($dialogScope.selectedItem)
  };

Answer 1

看看这个

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
 $scope.items = [{
                name:"Pencil",
                value:"0",
            },{
                name:"Eraser",
                value:"1"
            },{
                name:"Colourpencil",
                value:"2",
            },{
                name:"Ruler",
                value:"4",
            },{
                name: "Pen",
                options : ["Blue","Red","Colourful"]
            },{
                name: "Laptop",
                options : ["Dell","Lenovo","Acer"]
            },{
                name: "Pencil Box",
                value:"7",
            },{
                name: "Download CACHE By GPU",
                value:"8",
            },
            ];
                 
      $scope.hideMe = function(hideElements){
         if($scope.selectedItem){
            return (hideElements.indexOf($scope.selectedItem.name) != -1)?true:false;
         }
         else{
             return true;
         }
      }
                 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <label class="control-label">Type</label><br/>
  <select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
    <option value=""> Select Type</option>
  </select>
  {{selectedItem}}
   <div class="form-group has-feedback"  ng-if="selectedItem && hideMe(['Pencil', 'Ruler']);">
  <label class="control-label">{{(selectedItem.value==0)?"APK URL":"OBB URL"}}</label>
   <input type="url" class="form-control" ng-model="stepA" name="stepA" required>
 </div>

 <div class="form-group has-feedback"  ng-if="selectedItem && hideMe(['Pen', 'Laptop']);">
  <label class="control-label">{{(selectedItem.value==5)?"OBB URL":"APK URL"}}</label>
   <input type="url" class="form-control" ng-model="stepB" name="stepB" required>
 </div>

 <div class="form-group has-feedback">
  <label class="control-label">labelC</label>
   <input type="text" class="form-control" ng-model="stepC" name="stepC" required>
 </div>
</div>

下拉列表的多个条件

1 个答案: