Angularjs ng-model không hoạt động bên trong ng-if

Đây là fiddle cho thấy vấn đề. http://jsfiddle.net/Erk4V/1/

Nó xuất hiện nếu tôi có một mô hình ng bên trong một ng-if, mô hình không hoạt động như mong đợi.

Tôi tự hỏi nếu đây là một lỗi hoặc nếu tôi hiểu sai cách sử dụng đúng.

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

Lệnh ng-ifnày, giống như các chỉ thị khác tạo ra một phạm vi con. Xem kịch bản dưới đây (hoặc jsfiddle này )

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

Vì vậy, hộp kiểm của bạn thay đổi testbbên trong phạm vi con, nhưng không thay đổi phạm vi cha mẹ bên ngoài.

Lưu ý rằng nếu bạn muốn sửa đổi dữ liệu trong phạm vi cha, bạn sẽ cần sửa đổi các thuộc tính bên trong của một đối tượng như trong div cuối cùng mà tôi đã thêm.

Bạn có thể sử dụng $parentđể tham khảo mô hình được xác định trong phạm vi cha như thế này

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

Bạn có thể sử dụng chỉ thị ngHide (hoặc ngShow) . Nó không tạo phạm vi con như ng If.

<div ng-hide="testa">

Chúng tôi đã có điều này trong nhiều trường hợp khác, điều chúng tôi quyết định trong nội bộ là luôn có một trình bao bọc cho bộ điều khiển / chỉ thị để chúng tôi không cần phải suy nghĩ về nó. Dưới đây là ví dụ của bạn với trình bao bọc của chúng tôi.

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

Hy vọng điều này sẽ giúp, Yishay

Có, chỉ thị ng-hide (hoặc ng-show) sẽ không tạo phạm vi con.

Đây là thực hành của tôi:

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

Bạn có thể làm như thế này và chức năng mod của bạn sẽ hoạt động hoàn hảo cho tôi biết nếu bạn muốn một cây bút mã

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