ng-repeat值在ng外部評估 - if

如何訪問ng-repeat指令範圍之外的條件設置的ng-repeat數據？例如，當有人選擇一個在ng-repeat內生成的單選按鈕時，我想在ng-repeat之外顯示一個div塊。ng-repeat值在ng外部評估 - if

app.js

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.obj = [{ 
    condition: "Question1", 
    status: "no" 
    }, { 
    condition: "Question2", 
    status: "no" 
    }]; 
}

的.html

<tr ng-repeat="o in obj"> 
    <td>{{o.condition}}</td> 
    <td> 
    Yes 
    <input type="radio" ng-model="o.status" value="yes" /> No 
    <input type="radio" ng-model="o.status" value="no" /> 
    </td> 
</tr> 

<!-- this will show based on an input event--> 
<div ng-if="o.status == 'yes'" class="myClass"> 
I show up 
</div>

http://jsfiddle.net/fergnab/jmb619qg/

來源

2016-01-17 Fergus

你要顯示的附加'div'取決於哪個問題？ – miensol

是的，我想通過選擇radio ='yes'來在ng-repeat之外顯示div（或任何元素）。謝謝 – Fergus

你（可）在'obj'中有'o'多個問題。哪個'是'設置應該顯示額外的div？或者，當設置爲'yes'時，'obj'中的每個'o'都應該顯示一個新的div？ – miensol

它不可能。但你可以嘗試這樣的事情。

附加功能如果obj有「OK」的地位問題，將檢查

HTML

<div ng-if="someQuestionIsOk()" class="myClass">

控制器

$scope.someQuestionIsOk = function someQuestionIsOk() { 

    for(var i = 0; i < $scope.obj.length; i++) { 
     if($scope.obj[i].status == 'yes') 
      return true; 
    } 

    return false; 
}

編輯

這裏是fiddle

編輯

又一個可能的解決方案是使用NG-變化。

HTML

<input type="radio" ng-model="o.status" ng-change="statusChange(o)" value="yes" />

控制器

$scope.answerIsYes = false; 

$scope.statusChange = function statusChange(object) { 
    if(object.status == 'yes') 
     $scope.answerIsYes = true; 
    else 
     $scope.answerIsYes = $scope.someQuestionIsOk();   
}

來源

2016-01-17 20:46:34

這是非常好的，但我很確定它可以完成...我想ng-if $上的$ watch函數和工作可能的解決方案從您的js示例 – Fergus

爲什麼使用監視器，當您可以通過輸入ng-change調用函數 –

這正是我所想的;我現在正在嘗試 – Fergus

我這裏有本地工作，但不是當我嘗試在JS提琴 - 我米不知道爲什麼。

app.js（這是我如何用來定義控制器）：

var app = angular.module('myApp', []); 

app.controller('MyCtrl', function($scope) { 
    $scope.obj = [{ 
    condition: "Question0", 
    status: "no" 
    }, { 
    condition: "Question1", 
    status: "no" 
    }]; 
});

的index.html（使一個單獨的h1用於obj每個o）：

<body ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 

    <table> 
     <thead> 
     <th>Question</th> 
     <th>Status</th> 
     </thead> 
     <tbody> 
     <tr ng-repeat="o in obj"> 
      <td>{{o.condition}}</td> 
      <td> 
      Yes <input type="radio" ng-model="o.status" value="yes" /> 
      No <input type="radio" ng-model="o.status" value="no" /> 
      </td> 
     </tr> 
     </tbody> 
    </table> 

    <!-- this will display "question 0" and/or "question 1", based on input --> 
    <div ng-repeat="o in obj"> 
     <h1 ng-if="obj[$index].status === 'yes'" class="myClass"> 
     question {{$index}} 
     </h1> 
    </div> 

    </div> 
    <script src="app.js"></script> 
</body>

來源

2016-01-17 20:44:18 Nicholas

ng-repeat值在ng外部評估 - if

回答

相關問題