Angularjs ng-model не работает внутри ng-if

Вот скрипка, показывающая проблему. http://jsfiddle.net/Erk4V/1/

Появляется, если у меня есть ng-модель внутри ng-if, модель не работает должным образом.

Мне интересно, является ли это ошибкой или я неправильно понимаю правильное использование.

<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>

ОТВЕТЫ

Ответ 1

Директива ng-if, как и другие директивы, создает дочернюю область. Смотрите эту скрипту: http://jsfiddle.net/Erk4V/4/

Таким образом, ваш флажок изменяет testb внутри области дочернего объекта, но не внешнюю родительскую область.

Обратите внимание, что если вы хотите изменить данные в родительской области, вам нужно будет изменить внутренние свойства объекта, как в последнем добавленном div.

Ответ 2

Вы можете использовать $parent для ссылки на модель, определенную в родительской области, например,

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

Ответ 3

Вы можете использовать директиву ngHide (или ngShow). Он не создает дочернюю область, как это делает ngIf.

<div ng-hide="testa">

Ответ 4

Да, директива ng-hide (или ng-show) не будет создавать дочернюю область.

Вот моя практика:

<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/

Ответ 5

У нас это было во многих других случаях, что мы решили внутренне - всегда иметь оболочку для контроллера/директивы, чтобы нам не нужно было об этом думать. Вот вам пример с нашей оберткой.

<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>

Надеется, что это поможет, Йишай

Ответ 6

Вы можете сделать это, как это, и функция мод будет работать идеально, дайте мне знать, если вы хотите, чтобы ручка кода

  <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>