나는이 질문을하기 전에 이것을 언급했다.
AngularJs는 ng-model로 ng-checked를 바인딩하지 않습니다.
경우 ng-checked에 평가 true상의 html측의이 ng-model업데이트되지 않습니다. ng-repeat각 확인란에 스타일을 지정해야하므로 위의 질문에서 제안한대로 할 수 없습니다 .
여기 내 문제를 설명하기 위해 만든 플런 커가 있습니다.
http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t
내가 원하는 것을 보려면 콘솔을 열고 Submit버튼을 클릭하십시오 . 확인란을 선택하지 마십시오.
미리 감사드립니다!
답변:
ngModel와 ngChecked함께 사용되는 것은 아니다.
ngChecked는 표현식을 기대하므로 ng-checked="true"기본적으로 확인란이 기본적으로 항상 선택되어 있음을 말하는 것입니다.
ngModel모델의 부울 속성에 연결된을 사용할 수 있어야합니다 . 다른 것을 원한다면 ngTrueValueand ngFalseValue(지금은 문자열 만 지원함)를 사용하거나 직접 지시문을 작성해야합니다.
당신이하려는 것이 정확히 무엇입니까? 기본적으로 첫 번째 확인란 만 선택하도록하려면 모델을 변경해야합니다 item1: true,.
편집 : 모델의 현재 상태 인 btw를 디버깅하기 위해 양식을 제출할 필요가 없습니다 . {{testModel}}HTML (또는 <pre>{{testModel|json}}</pre>) 로 덤프 할 수 있습니다 . 또한 ngModel속성을 ng-model="testModel.item1".
ngChecked. 모델은 괜찮 testModel.item1 = true습니다. ajax 콜백 을 설정 한 다음 $scope.$apply()뷰를 업데이트하기 위해 호출 하면됩니다.
ng-checked는 ng-model... 대신 사용하는 실수를 저질렀 습니다!
ng-value-true를 사용하여 ng-model이 문자열임을 angular에 알릴 수 있습니다.
이렇게 추가 따옴표를 추가 한 경우에만 ng-true-value가 작동 할 수 있습니다 (공식 Angular 문서-https: //docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D ).
ng-true-value="'1'"
in ng-init로 선언 할 수 있음
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
<label><input type="checkbox" name="test" ng-model="testModel['item1']" /> Testing</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
<input type="button" ng-click="submit()" value="Submit" />
</body>
</html>
그리고 첫 번째 항목과 여기에 표시된 개체도 선택할 수 있습니다. true, false, flase
ngInit. 이 지시문은 템플릿에 불필요한 양의 논리를 추가하기 위해 악용 될 수 있습니다. 참조 AngularJS와는 지침 API 참조-init를 NG .
ng-model및 ng-checked지침은 함께 사용할 수 없습니다문서에서 :
ngChecked
내부 표현식
ngChecked이 진실 인 경우 요소에 확인 된 속성을 설정합니다 .이 지시문은
ngModel예상치 못한 동작을 유발할 수 있으므로 와 함께 사용해서는 안됩니다 .
대신 컨트롤러에서 원하는 초기 값을 설정하십시오.
<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />
$scope.testModel = { item1: true };
ng-checked사용할 때 필요하지 않습니다 ng-model. HTML 양식에서 CRUD 를 수행하는 경우 데이터 바인딩 중에 모드 CREATE와 일치하는 모드에 대한 모델을 만듭니다 EDIT.
$scope.dataModel = {
isItemSelected: true,
isApproved: true,
somethingElse: "Your default value"
}
$scope.dataModel = getFromDatabaseWithSameStructure()
그런 다음 여부 EDIT또는 CREATE모드, 당신은 일관되게 사용할 수있다 ng-model데이터베이스와 동기화 할 수 있습니다.
ng-checked표현식에 의해 참으로 계산됩니다.ng-model연결되지 않음 을 나타 내기 위해 나는 거기에서 true를 사용했습니다. 컨트롤러를 시작하는 동안 모든 확인란을 선택 취소하고 싶습니다. 일부 ajax 요청 후ng-checked확인란을 확인하기 위해 계산합니다 . 이것은 내ng-model업데이트가 아닐 때 입니다.