2017-02-24 36 views
0

UPDATE:對不起,我應該使人們更清楚,但我想要的東西也是如果我從選擇「下拉1」null值以外,我表2自動消失 b/C我只希望看到表1當我使用下拉1「drop down 2」同樣的事情。如果我從下拉選擇2選擇任何非空值,我的表1消失,我只看到表2.我也更新了我的小提琴這裏https://jsfiddle.net/missggnyc/4vod1L9g/7/和表隱藏如果從下拉列表中選擇null值。我現在需要的是如何顯示一個或另一個表,具體取決於我使用的下拉列表。角NG-展示和NG-變化來顯示和隱藏在<select>標籤取決於用戶選擇表


原貼: 我變得有點困惑如何使用ng-showng-change顯示取決於兩個DIF用戶選擇我的兩個不同的表。下降。

這裏的情景:

只要用戶不與這兩個下拉菜單null值選擇SELECT YOUR ANSWER,我有一個過濾器,做字符串比較,並通過色彩過濾掉。這是我想要做的。

用戶從「下拉1」

  • 節目表1選擇與過濾的結果,如果用戶沒有選擇「選擇你的答案」與空值
  • 如果用戶選擇「選擇你的答案」,則沒有表顯示
  • 隱藏表2只要‘下拉1’得到選擇

用戶從選擇‘下拉2’

  • 節目表2用經過濾的結果,如果用戶沒有選擇「選擇你的答案」與空值
  • 如果用戶選擇「選擇你的答案」,則沒有表顯示
  • 隱藏表2只要「下拉1」被選中

我對如何在我的情況下使用ng-show或ng-change感到困惑。有什麼建議麼?

See demo here

HTML

<div ng-app="myColors"> 
    <div ng-controller="cController"> 
    <h3>drop down 1</h3> 
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change=""></select> 
    <pre>{{selectedAnswer1}}</pre> 
     <h3>drop down 2</h3> 
    <select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2"></select> 
    <pre>{{selectedAnswer2}}</pre> 
    <hr> 
    <h4> 
    table 1 
    </h4> 
    <table> 
     <tr> 
     <td>ID</td> 
     <td>Category</td>  
     </tr> 
     <tr ng-repeat="f in fruit"> 
     <td>{{f.id}}</td> 
     <td>{{f.f_category}}</td>   
     </tr> 
    </table> 

    <h4> 
     table 2 
    </h4> 
    <table> 
     <tr> 
     <td>Car</td> 
     </tr> 
     <tr ng-repeat="c in car">   
     <td>{{c.category}}</td>   
     </tr> 
    </table> 

    </div> 
</div> 

JS

var app = angular.module("myColors", []); 
app.controller("cController", function($scope) { 
    $scope.mySelection1 = [ 
    {"cat": "SELECT YOUR ANSWER", "value": null}, 
    {"cat": "YELLOW", "value": "yellow"}, 
    {"cat": "ORANGE", "value": "orange"} 
    ]; 
    $scope.mySelection2 = [ 
    {"cat": "SELECT YOUR ANSWER", "value": null }, 
    {"cat": "GREEN CAR", "value": "green"}, 
    {"cat": "BLUE CAR", "value": "blue"} 
    ]; 
    $scope.fruit = [{ 
    "id": "red", 
    "f_category": ["Apple", "Strawberry", "Pineapple"] 
    }, { 
    "id": "yellow", 
    "f_category": ["Banana", "Pineapple"] 
    }, { 
    "id": "orange", 
    "f_category": ["Peach", "Nectarine"] 
    }]; 

    $scope.car = [{ 
    "name": "yellow", 
    "category": ["SUV", "Truck"] 
    }, { 
    "name": "blue", 
    "category": ["Van"] 
    }, { 
    "name": "orange", 
    "category": ["Mini-Van"] 
    }]; 

}); 

回答

0

UPDATE: 據我瞭解,你只想要顯示/隱藏其他表如果第一個是選擇。這裏有一個簡單的解決方案:

<div ng-app="myColors"> 
    <div ng-controller="cController"> 
    <h3>drop down 1</h3> 
    <select name="select1" ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selection1Change()"></select> 
    <pre>{{selectedAnswer1}}</pre> 
     <h3>drop down 2</h3> 
    <select name="select2" ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selection2Change()"></select> 
    <pre>{{selectedAnswer2}}</pre> 
    <hr> 
    <div ng-show="selectedAnswer1 && flag1"> 
    <h4> 
    table 1 
    </h4> 
    <table> 
     <tr> 
     <td>ID</td> 
     <td>Category</td>  
     </tr> 
     <tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id"> 
     <div > 
     <td >{{f.id}}</td> 
     <td >{{f.f_category}}</td> 
     </div> 
     </tr> 
    </table> 
    </div> 
    <div ng-show="selectedAnswer2 && flag2"> 
    <h4> 
     table 2 
    </h4> 
    <table> 
     <tr> 
     <td>Car</td> 
     </tr> 
     <tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">   
     <td>{{c.category}}</td>   
     </tr> 
    </table> 

    </div> 
    </div> 
</div> 

var app = angular.module("myColors", []); 
app.controller("cController", function($scope) { 

    $scope.mySelection1 = [ 
    {"cat": "SELECT YOUR ANSWER", "value": null}, 
    {"cat": "YELLOW", "value": "yellow"}, 
    {"cat": "ORANGE", "value": "orange"} 
    ]; 
    $scope.mySelection2 = [ 
    {"cat": "SELECT YOUR ANSWER", "value": null }, 
    {"cat": "GREEN CAR", "value": "green"}, 
    {"cat": "BLUE CAR", "value": "blue"} 
    ]; 
    $scope.fruit = [{ 
    "id": "red", 
    "f_category": ["Apple", "Strawberry", "Pineapple"] 
    }, { 
    "id": "yellow", 
    "f_category": ["Banana", "Pineapple"] 
    }, { 
    "id": "orange", 
    "f_category": ["Peach", "Nectarine"] 
    }]; 

    $scope.car = [{ 
    "name": "yellow", 
    "category": ["SUV", "Truck"] 
    }, { 
    "name": "blue", 
    "category": ["Van"] 
    }, { 
    "name": "orange", 
    "category": ["Mini-Van"] 
    }]; 
    $scope.selection1Change = function(){ 
    $scope.flag1 = true; 
    $scope.flag2 = false; 
    } 
    $scope.selection2Change = function(){ 
    $scope.flag1 = false; 
    $scope.flag2 = true; 
    } 
}); 

OLD: 無需使用NG-變化,因爲angularjs本身它會更新NG-模式的價值,所以你可以使用NG-顯示與NG-模型的價值,展現在波紋管代碼:

<div ng-app="myColors"> 
    <div ng-controller="cController"> 
    <h3>drop down 1</h3> 
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1"></select> 
    <pre>{{selectedAnswer1}}</pre> 
     <h3>drop down 2</h3> 
    <select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2"></select> 
    <pre>{{selectedAnswer2}}</pre> 
    <hr> 
    <h4> 
    table 1 
    </h4> 
    <table ng-show="selectedAnswer1"> 
     <tr> 
     <td>ID</td> 
     <td>Category</td>  
     </tr> 
     <tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id"> 
     <div > 
     <td >{{f.id}}</td> 
     <td >{{f.f_category}}</td> 
     </div> 
     </tr> 
    </table> 

    <h4> 
     table 2 
    </h4> 
    <table ng-show="selectedAnswer2"> 
     <tr> 
     <td>Car</td> 
     </tr> 
     <tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">   
     <td>{{c.category}}</td>   
     </tr> 
    </table> 

    </div> 
</div> 
+0

哇...這麼簡單得多,比我的預期。只需觸發真正的和錯誤的組合。感謝你的回答!!! – missgg

0

ng-show允許您利用數據綁定的優勢,所以您不必手動觀看事件就像你在做的香草JS(具有事件處理程序或onchange屬性)。這是在angularJs中執行任務的首選方式。只有在沒有其他選擇時才使用ngChange。

此外,在這裏使用ng-if可能會更好,因爲在不顯示時可以節省構建表的成本。使用

0

ng-changefilter指導你達到你期望的行爲,看看這個片斷

var app = angular.module("myColors", []); 
 
app.controller("cController", function($scope) { 
 
\t $scope.selectedFruit = null; 
 
\t $scope.selectedCar = null; 
 
\t $scope.mySelection1 = [ 
 
    {"cat": "SELECT YOUR ANSWER", "value": null}, 
 
    {"cat": "YELLOW", "value": "yellow"}, 
 
    {"cat": "ORANGE", "value": "orange"} 
 
    ]; 
 
    $scope.mySelection2 = [ 
 
    {"cat": "SELECT YOUR ANSWER", "value": null }, 
 
    {"cat": "GREEN CAR", "value": "green"}, 
 
    {"cat": "BLUE CAR", "value": "blue"} 
 
    ]; 
 
    $scope.fruit = [{ 
 
    "id": "red", 
 
    "f_category": ["Apple", "Strawberry", "Pineapple"] 
 
    }, { 
 
    "id": "yellow", 
 
    "f_category": ["Banana", "Pineapple"] 
 
    }, { 
 
    "id": "orange", 
 
    "f_category": ["Peach", "Nectarine"] 
 
    }]; 
 
    
 
    $scope.car = [{ 
 
    "name": "yellow", 
 
    "category": ["SUV", "Truck"] 
 
    }, { 
 
    "name": "blue", 
 
    "category": ["Van"] 
 
    }, { 
 
    "name": "orange", 
 
    "category": ["Mini-Van"] 
 
    }]; 
 
\t 
 
\t $scope.selectFruit = function(selectedItem){ 
 
\t \t $scope.selectedFruit = selectedItem.value; \t 
 
\t } \t 
 
\t $scope.selectCar = function(selectedItem){ 
 
\t \t $scope.selectedCar = selectedItem.value; \t 
 
\t } 
 
    
 
});
table, th, td { 
 
    border: 1px solid black; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 

 
<div ng-app="myColors"> 
 
    <div ng-controller="cController"> 
 
    <h3>drop down 1</h3> 
 
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selectFruit(selectedAnswer1)"></select> 
 
    <pre>{{selectedAnswer1}}</pre> 
 
     <h3>drop down 2</h3> 
 
    <select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selectCar(selectedAnswer2)"></select> 
 
    <pre>{{selectedAnswer2}}</pre> 
 
    <hr> 
 
    <h4> 
 
    table 1 
 
    </h4> 
 
    <table> 
 
     <tr> 
 
     <td>ID</td> 
 
     <td>Category</td>  
 
     </tr> 
 
     <tr ng-repeat="f in fruit | filter:selectedFruit"> 
 
     <td>{{f.id}}</td> 
 
     <td>{{f.f_category}}</td>   
 
     </tr> 
 
    </table> 
 
    
 
    <h4> 
 
     table 2 
 
    </h4> 
 
    <table> 
 
     <tr> 
 
     <td>Car</td> 
 
     </tr> 
 
     <tr ng-repeat="c in car | filter:selectedCar">   
 
     <td>{{c.category}}</td>   
 
     </tr> 
 
    </table> 
 
    
 
    </div> 
 
</div>