如何在多条件选择中使用ng-if-AngularJS答案

【问题标题】：How to use ng-if in Select with multiple conditions-AngularJS如何在多条件选择中使用ng-if-AngularJS
【发布时间】：2016-11-12 06:33:22
【问题描述】：

我是 angularjs 的新手。我正在尝试编写代码以从多个选择选项中获取内容。根据我下面的代码，当我从产品下拉列表中选择“HTML 5 FEATURES”时，我想获得#html 内容。我怎样才能以更简单的方式获得。这是我的代码的样子：

enter code here
<html>

<head>

<link rel="stylesheet"    
href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css">
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/
angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
 <div class="container">
    <h1>Web Developer</h1>
  <div class="row">
     <div class="col col-lg-4">
        <form class="form">
           <div class="form-group">
              <label> Categories :</label>
                  <select name="categoriesList" ng-model="selectedCategory" 
                   class="form-control">                                               
                    <option ng-repeat="item in CategoryList"      
                     value='{{item}}'>{{item.value}}</option>
                 </select>
          </div>
          <div class="form-group">
             <label> Products :</label>
               <select ng-disabled="selectedCategory == null"    
               name="productList" ng-model="selectedProduct" 
               class="form- control">

                <option ng-repeat="item in ProductList | myFilter : 
                selectedCategory" value='{{item}}'>{{item.value}}</option>
              </select>
           </div>
      <div id="html" ng-if="selectedProduct.value === 'HTML 5 FEATURES'">
        <div class="newFeatures">
         <ul>
            <li>New Doctype</li>
            <li>The Figure Element</li>
            <li>Email Inputs</li>
            <li>Placeholders</li>
            <li>Local Storage</li>
            <li>Autofocus Attribute</li>
         </ul>
      </div>
    </div>
   </form>
  </div>
 </div>
 <script>
   var app = angular.module('myApp', []);
   angular.module('myApp').filter('myFilter', function() {
   return function(input, selectedCategory) {

   input = input || '';
    if(selectedCategory == null){
    return input;
    }else{
    var out = new Array();  
    selectedCategory = JSON.parse(selectedCategory);
    for (var i = 0; i < input.length; i++) {
        var item = input[i];
        if(item.categoryId == selectedCategory.id){
            out.push(item);
         }
     }
      return out;
   }
  };
 });

    app.controller('myCtrl', ['$scope', function($scope) {
    $scope.selectedCategory = null;
    $scope.selectedProduct = null;

    $scope.CategoryList = [
         {id:0, value:'HTML'},
         {id:1, value:'CSS'},
         {id:2, value:'JAVA SCRIPT'},
         {id:3, value:'ANGULAR JS'}
      ];
   $scope.ProductList = [
         {categoryId:0, id:1, value:'HTML 5 FEATURES'},
         {categoryId:0, id:2, value:'WEB WORKERS'},
         {categoryId:0, id:3, value:'STORAGE'},
         {categoryId:0, id:3, value:'CANVAS'},
         {categoryId:0, id:3, value:'KEYFRAMES'},
         {categoryId:1, id:4, value:'BOX MODEL'},
         {categoryId:1, id:5, value:'NEW CSS3 FEATURES'},
         {categoryId:1, id:6, value:'POSITIONS'},
         {categoryId:2, id:7, value:"OOPs"},
         {categoryId:2, id:8, value:'ARRAY MANIPULATIONS'},
         {categoryId:2, id:9, value:'EMAIL'},
         {categoryId:3, id:9, value:'DIRECTIVES'},
         {categoryId:3, id:9, value:'FILTERS'},
         {categoryId:3, id:9, value:'SCOPES & ROOT SCOPES'},
     ];

    }]);
  </script>
  </body>
  </html>

【问题讨论】：

标签： angular-ng-if

【解决方案1】：

简单的方法 - 例如将 $http.get 请求放入您的控制器并设置 ProductList 数据。

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    $scope.ProductList = response.data;
    
  }, function errorCallback(response) {
    
  });

【讨论】：