2016-08-23 149 views
1

我有一個條件,它只是在選擇圖像中選擇一個圖像,下一個按鈕需要啓用,並且下一個不應該在最後一個外部選擇啓用。這裏的問題在於選擇第一個圖像時,按鈕被啓用,範圍將該值指定爲false,並且對於圖像的第二次迭代不成立。請讓我知道這個問題的任何想法。Angular JS - 啓用和禁用按鈕

      <div class="col-xs-6 col-md-10 col-lg-7"> 
          <div ng-repeat="outer in outers track by $index" > 
           <div ng-if="outer_index== $index">       
            <div ng-bind="::outer.label"></div>        
            <ul class="list-group">        
             <li class="cursorPointer" ng-repeat="inner in outer.inners | orderBy: 'id'" ng-class="{'selected': getSelectedClass($parent.$index, $index)}" class="deselected"> 
             <div class="col-xs-6"> 
             <div class="img"> 
             <img ng-src="data:image/png;base64,{{inner.base64Icon}}" alt="{{inner.description}}" title="{{inner.description}}" 
              ng-click="process()"> 
             <div class="desc" ng-bind="inner.description"></div></div> 
             </div> 
             </li>         
            </ul> 
           </div>             
          </div> 
         </div>  
        <div><button type="button" class="btn btn-info" ng-disabled="outer_index == outers.length -1 || disableNext" ng-click="getNext()">Next</button></div> 

在JS代碼,只激活如果按鈕,

$scope.disableNext=true; 
    $scope.process = function() { 
    $scope.disableNext=false; 
} 

$scope.getNext = function(){ 
    $scope.outer_index = $scope.outer_index + 1; 
    $scope.datas = $scope.outers[$scope.outer_index]; 
} 

注:我試過 ng-click="process();disableNext=false;"這種情況不會內ng-repeat工作。

+0

嗨,我不確定明白,爲什麼它應該設置爲true,我沒有看到你把它設置爲true的位置。 – Mathieu

+0

默認情況下,我將disableNext設置爲true,用於ng-disabled = true,使加載按鈕處於禁用狀態,並且如果任何圖像被點擊,它將調用進程並將$ scope.disableNext更改爲false,而按鈕將啓用。 – user3428736

+0

因此,當你選擇一個圖像的按鈕被啓用?它工作嗎?如果是這樣,我不明白你的問題。也許你想在getnext()之後禁用它? – Mathieu

回答

0

只需在選擇下一個後將disableNext設置爲true,它就可以工作!

$scope.getNext = function(){ 
      $scope.disableNext=true; 
      $scope.outer_index = $scope.outer_index + 1; 
      $scope.datas = $scope.outers[$scope.outer_index]; 
    }