Angularjs ng-model ng-if içinde çalışmaz

206

İşte sorunu gösteren keman. http://jsfiddle.net/Erk4V/1/

Bir ng-if içinde bir ng-modelim varsa, model beklendiği gibi çalışmıyor.

Bunun bir hata olup olmadığını veya doğru kullanımı yanlış anlayıp anlamadığımı merak ediyorum.

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" />
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>

    </div>
</div>

angularjs

— Justin Carlson
kaynak

6

Geçici bir çözüm için ng-if yerine ng-show = "CONDITION" kullanabilirsiniz. İşe yaramalı.

— Hari Das

Sanırım artık bu artık bir sorun değil controllerAsmi?

— jamiebarrow

Örtülü bir yönerge kullanırken aynı sorunu scope:falseyaşadım ng-ifve yönerge etrafına eleman ekledim - başlangıçta kapsamlar bağlandı, ancak bir gözlemci kapsam değerlerinden birini güncelledikten sonra ayrıldı ...

— Nisan

223

ng-ifDiğer yönergeler gibi yönerge, bir çocuk kapsamını oluşturur. Aşağıdaki komut dosyasına bakın (veya bu jsfiddle )

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.obj = {test: false};
    }
</script>

<div ng-app >
    <div ng-controller="main">
        
        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        {{obj.test}}
        
        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" /> {{testb}}
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>
        <div ng-if="!someothervar">
            object (with ng-if): <input type="checkbox" ng-model="obj.test" />
        </div>
        
    </div>
</div>

Snippet'i genişlet

Bu nedenle, onay kutunuz testbalt kapsamın içini değiştirir , ancak dış ana kapsamı değiştirmez.

Üst kapsamdaki verileri değiştirmek isterseniz, eklediğim son div öğesinde olduğu gibi bir nesnenin dahili özelliklerini değiştirmeniz gerektiğini unutmayın.

— Jon7
kaynak

1

Ng-if'in kapsamına ana kontrolörler işlevinden nasıl erişebilirim? Biraz sinir bozucu. Bunun sebebi ne?

— Justin Carlson

Nevermind, @sza bu ^ soruyu yeni yanıtladı. Bu yanıtı doğru olarak işaretleyeceğim, çünkü sorun yaşadığımın kesin nedenini açıklıyor.

— Justin Carlson

21

Bu, örnekte belirtildiği gibi, kapsam özelliklerini doğrudan değiştirmek yerine kapsamınızda bir nesne kullanmanın oldukça yaygın olmasının bir nedenidir: $scope.obj = {...}ve ng-model="obj.someProperty"bu sınırlamanın üstesinden gelir.

— wulftone

204

$parentÜst kapsamda bu şekilde tanımlanan modele başvurmak için kullanabilirsiniz

<input type="checkbox" ng-model="$parent.testb" />

— zs2020
kaynak

16

o zaman ben ng-model="$parent.$parent.foozaten bir kapsam içinde olduğum için var ng-repeat- bu gerçekten en iyi yol mu?

— chovy

4

bu gerçekten kafa karıştırıcı. Neden? ve neden ng-hide'ın kendi kapsamı yok?

— Dominik Goltermann

5

Re @Gaul: muhtemelen ng-hide / ng-show mevcut DOM üzerinde çalışıyor ve sadece bir CSS sınıfı ekliyor / kaldırıyor, ng-if / ng-switch / ng-DOM ile tüm muck'leri tekrarlıyor ve ekstra durumu takip ediyor . Mantıklı görünüyor.

— trisweb

4

Mantıklı kullandığım kelime değil .

— Jonathan Dumaine

3

Özgün kapsama bir nesne ekleyin ve o nesnenin özelliklerini değiştirin. örneğin ng-model = "myObject.property". Bu, tüm kapsam / $ ebeveyn inancını azaltacaktır. Daha fazla bilgi için Google "açısal nokta kuralı".

— Şubat'ta Asmor

50

Sen kullanabilirsiniz ngHide (veya ngShow) yönergesini. NgIf gibi alt kapsam oluşturmaz.

<div ng-hide="testa">

— Vasiliy Kevroletin
kaynak

3

ngIfO zaman neden bir alt kapsam oluşturur? Bana çok garip geliyor.

— freeall

5

Zsong cevabının yorumlarına dikkat edin. ng-hidehtml yapısını değiştirmez. Sadece css stillerini değiştirir. ng-ifdaha karmaşıktır: duruma bağlı olarak html parçalarını kaldırır ve ekler. Durumu depolamak için alt kapsam oluşturur (en azından gizli html kısmını saklamalıdır).

— Vasiliy Kevroletin

Evet, benim için çalış

— Basit

7

Diğer birçok durumda bunu yaşadık, dahili olarak karar verdiğimiz şey, denetleyici / direktif için her zaman bir sargıya sahip olmaktır, böylece düşünmemize gerek kalmaz. İşte bizim sarıcı ile örnek.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.thisScope = $scope;
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.testd = false;
    }
</script>

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="thisScope.testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="thisScope.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="thisScope.testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="thisScope.testd" />
        </div>

    </div>
</div>

Umarım bu yardımcı olur, Yishay

— Yishay Haspel
kaynak

3

Evet, ng-hide (veya ng-show) yönergesi alt kapsam oluşturmaz.

İşte benim uygulama:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.testd = false;
    }
</script>

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="$parent.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="testd" />
        </div>

    </div>
</div>

http://jsfiddle.net/bn64Lrzu/

— Xiayan Y
kaynak

0

Bunu böyle yapabilirsiniz ve mod fonksiyonu mükemmel çalışacak bir kod kalemi istiyorsanız bana bildirin

  <div ng-repeat="icon in icons">                   
                <div class="row" ng-if="$index % 3 == 0 ">
                    <i class="col col-33 {{icons[$index + n].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 1].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 2].icon}} custom-icon"></i>
                </div>
         </div>

— Xvegas
kaynak