AngularJS ng - 如果到第二個DOM樹級別不起作用

我有ng-if兩個級別的條件。如果第一個div中的第一個條件滿足第二個div應該顯示。同樣，如果第二個ng-if滿足第三個div應該顯示。但我只能看到第二個div。AngularJS ng - 如果到第二個DOM樹級別不起作用

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div><input type="number" ng-model="temp"></div> 
 
<div ng-if="temp>40"> 
 
    <input type="radio" ng-click="temp2=true">Yes 
 
    <input type="radio" ng-click="temp2=false">No 
 
</div> 
 
<div ng-if="temp2"> 
 
    <p>Some content</p> 
 
</div>

的最後一個div顯示，如果我用ng-show。但我不能使用ng-show。還有更多的divs根據這些條件工作。請幫我在這方面

來源

2017-07-29 Naresh

因爲ng-if創建新的範圍。試試這個。

<div><input type="number" ng-model="temp"></div> 
    <div ng-if="temp>40"> 
     <input type="radio" ng-click="temp2=true">Yes 
     <input type="radio" ng-click="temp2=false">No 
     <div ng-if="temp2"> 
     <p>Some content</p> 
     </div> 
    </div>

編輯

這是更好地利用controllerAs語法。

var app = angular.module('myApp', []); 
 
app.controller('AppCtrl', function($scope) { 
 
    var vm = this; 
 
    
 
    
 
    vm.setTemp2 = function(){ 
 
    vm.temp > 40 && vm.temp2 ? vm.temp2= true : vm.temp2=false; 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="AppCtrl as vm"> 
 
    <div><input type="number" ng-model="vm.temp" ng-change="vm.setTemp2(vm.temp)" ></div> 
 
    <div ng-if="vm.temp>40"> 
 
    <input type="radio" name="content" ng-click="vm.temp2=true">Yes 
 
    <input type="radio" name="content" ng-click="vm.temp2=false">No 
 
    </div> 
 
    <div ng-if="vm.temp2"> 
 
    <p>Some content</p> 
 
    </div> 
 
</div>

來源

2017-07-29 05:40:03

你好，抱歉這樣說。你的代碼不起作用。試試這個，在輸入字段中輸入一個大於40的值。現在你可以檢查Yes單選按鈕。這樣你就可以看到「一些內容」。現在刪除輸入字段中的數字。不過，你可以看到「一些內容」。但由於收音機不在dom樹中，它也應該從dom中刪除。代碼是使用JS動態生成的，並附加到html內容。所以請想想，不需要控制器的幫助。提前致謝。 – Naresh

非常感謝。你的代碼部分工作。對於「Some content」div，你不應該使用temp> 40。因爲代碼是在javascript中動態生成的。同時生成最後的div我只有第二級條件。不是第一個。請通過刪除temp> 40來嘗試相同的代碼。而且第一個div應該在輸入字段後關閉。因爲所有的div都是在一個循環內生成的。所以，當迭代完成時div必須關閉。如果我錯了，請忽略 – Naresh

這是因爲ng-if創建一個新的子範圍。這可以通過將該屬性綁定到一個對象來避免。通過使用.，該屬性將直接綁定到父級，而不是在ng-if中創建的子級範圍。您不必重構所有divs。

var myApp = angular.module('myApp', []); 
 
    myApp.controller('ctrl', ['$scope', function ($scope) { 
 
    $scope.temp2={}; 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="ctrl"> 
 
<div ><input type="number" ng-model="temp"></div> 
 
<div ng-if="temp>40"> 
 
<input type="radio" ng-click="temp2.val=true">Yes 
 
<input type="radio" ng-click="temp2.val=false">No 
 
</div> 
 
<div ng-if="temp2.val&&temp>40"> 
 
<p>Some content</p> 
 
</div> 
 
</body>

有關詳細信息：What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

這也可以通過使用controllerAs語法由@Hadi提到避免。 controllerAs語法將處理點規則。

來源

2017-07-29 05:50:44 Vivz

'controllerAs'隱式地處理'Dot Rule'，所以''''''''''今天比較偏愛IMO –

我同意它會照顧點規則。但我正在解釋問題的原因以及如何通過使用點來避免這種情況。我正在解釋，以便OP瞭解發生了什麼。我希望他知道javascript原型繼承的基礎知識，然後他可以轉到控制器的語法 – Vivz

@Vivz。我知道點概念。我在編碼中使用了點概念。但是這裏發佈了沒有點的問題。我對此很抱歉。 – Naresh

無需使用ng-click，您可以將單選按鈕的值與使用ng-model的模型綁定。

實際上有兩個問題：

的NG-如果創建一個新的範圍。所以你需要把你的第二個ng-if代碼放在父代ng-if之內。
而你沒有給你的單選按鈕的名稱屬性是必要的。

更新的代碼：

只是下面的一個取代你的代碼..

<div ng-app="">  
    <div><input type="number" ng-model="temp"></div> 
    <div ng-if="temp>40"> 
    <input type="radio" name="content" ng-model="temp2" value="true">Yes 
    <input type="radio" name="content" ng-model="temp2" value="false">No 
    <div ng-if="temp2=='true'"> 
     <p>Some content</p> 
    </div> 
    </div> 
</div>

來源

2017-07-29 05:50:45

AngularJS ng - 如果到第二個DOM樹級別不起作用

回答

相關問題