如何在具有多個條件的Select中使用ng-if-AngularJS

我是angularjs的新手。我試圖編寫代碼來從多個選擇選項中獲取內容。根據我的下面的代碼，我想從產品下拉菜單中選擇「HTML 5 FEATURES」時獲得#html內容。如何以更簡單的方式獲得。以下是我的代碼的樣子：如何在具有多個條件的Select中使用ng-if-AngularJS

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>

來源

2016-11-12 Kowshik

簡單的方法 - 例如將$ http.get請求放入您的控制器並設置ProductList數據。

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

來源

2016-11-12 07:40:00

如何在具有多個條件的Select中使用ng-if-AngularJS

回答

相關問題