여기에 문제를 보여주는 바이올린이 있습니다. http://jsfiddle.net/Erk4V/1/
ng-if 내부에 ng-model이 있으면 모델이 예상대로 작동하지 않습니다.
이것이 버그인지 또는 올바른 사용법을 오해하고 있는지 궁금합니다.
<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>답변
ng-if다른 지시어와 같은 지시는, 아이의 범위를 만듭니다. 아래 스크립트를 참조하십시오 (또는 이 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>따라서 확인란 testb이 하위 범위 내부를 변경 하지만 외부 상위 범위는 변경 하지 않습니다.
부모 범위의 데이터를 수정하려면 마지막으로 추가 한 div에서와 같이 개체의 내부 속성을 수정해야합니다.
답변
$parent다음과 같이 상위 범위에 정의 된 모델을 참조하는 데 사용할 수 있습니다
<input type="checkbox" ng-model="$parent.testb" />답변
ngHide (또는 ngShow) 지시문을 사용할 수 있습니다 . ngIf처럼 자식 범위를 만들지 않습니다.
<div ng-hide="testa">답변
우리는 다른 많은 경우에 이것을 가지고있었습니다. 내부적으로 결정한 것은 컨트롤러 / 디렉티브에 대한 래퍼를 항상 가지고 있기 때문에 생각할 필요가 없습니다. 다음은 래퍼의 예제입니다.
<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>이것이 도움이되기를 바랍니다, Yishay
답변
예, 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>답변
당신은 이렇게 할 수 있고 당신은 코드 펜을 원한다면 알려주세요 mod 함수가 완벽하게 작동합니다.
<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>답변
