根據ng-repeat中的下拉值顯示div

下面的事情花費的時間比預期的要多。通過頂部堆疊解決方案已經和設法讓下面件事 -根據ng-repeat中的下拉值顯示div

什麼是之情況

我有一個下拉的NG-重複股利。

下拉列表包含值，並基於這些值的選擇將顯示一個div。顯示了我管理的div。但是當我選擇另一個項目時，先前的項目div會被隱藏。

下面是屏幕截圖和我的代碼

如可以看出的是，當我選擇第一項則顯示文本框格。但是當我選擇下一個項目時，第一個項目會被隱藏。基本上有兩個值 - ALL，Fixed。當所有選中的內容都不會顯示，選擇固定時，將顯示該特定項目的分區。

HTML代碼

    <div class="tst text-success" ng-repeat="(parentIndex, catList) in categoryArray"> 
         <div class="col-md-3"> 
         {{catList.categoryName}} 
         </div> 
         <div class="col-md-4"> 
         <select class="form-control m-b" ng-model="catObj.cats" ng-change="changeOption(catObj,parentIndex)"> 
         <option value="All">All</option> 
         <option value="fixed">Fixed No. Of Records</option> 
         <option value="perfixed">% od Fixed</option> 
         </select> 
         </div> 
         <div class="col-md-3 noPad" ng-if="isShowing==parentIndex"> 
         <input type="text" class="form-control form-control-small" placeholder="Set Number" /> 
         </div> 
        </div>

控制器

$scope.changeOption = function(obVal,index) { 
    console.log(obVal); 
    console.log(index); 
    if(obVal.cats == "All") { 
     //$scope.tbx = 0; 
    } 
    else { 
     $scope.isShowing = index; 
    } 

    }

幫助，將不勝感激感謝

來源

2017-05-06 Neo

你正在改變所有重複對象isShowing數據，並說只是顯示X索引。只需更改相關的div scope.isShowing值並檢查與顯示範圍相關的真假值的isShowing選項。 –

您正在使用單個布爾$ scope變量'isShowing'來控制多個div的可見性。這不可能工作。你應該。 1.有一組對象，每個對象都有一個'selectedOption'字段。 2.在你的選擇框中使用ng-model來設置你正在編輯的對象的'selectedOption'。 3.使用對象的selectedOption的值來知道附加輸入是否應該對該對象可見*。 –

Plunkr：http://plnkr.co/edit/EmsXOkGD6i73NIUKhpB3?p=preview –

您使用的是單布爾 $範圍變量，isShowing，可控制可見的幾個 d IVS。這不可能工作。

你應該

有對象的數組，每一個都具有selectedOption字段。
在您的選擇框中使用ng-model來設置您正在編輯的對象的selectedOption。
使用對象的selectedOption的值來知道附加輸入是否應該對該對象可見。

例子：

<div ng-repeat="obj in objects"> 
    {{ obj.name }} 
    <select name="op" ng-model="obj.selectedOption" ng-options="option.value as option.value for option in options"></select> 
    <input ng-if="obj.selectedOption !== 'All'" /> 
</div> 

app.controller('MainCtrl', function($scope) { 
    $scope.options = [ 
    {value: 'All'}, 
    {value: 'Fixed'} 
    ]; 

    $scope.objects = [ 
    {name: 'Twitter', selectedOption: 'All'}, 
    {name: 'News', selectedOption: 'Fixed'} 
    ] 
});

來源

2017-05-06 08:06:20

根據ng-repeat中的下拉值顯示div

回答

相關問題