AngularJS : ng-model이 확인란에 대해 ng-checked에 바인딩되지 않음
나는이 질문을하기 전에 이것을 언급했다.
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".
http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview
ng-value-true를 사용하여 ng-model이 문자열임을 angular에 알릴 수 있습니다.
이렇게 추가 따옴표를 추가 한 경우에만 ng-true-value가 작동 할 수 있습니다 (공식 Angular 문서-https: //docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D ).
ng-true-value="'1'"
당신이 할 수있는 일은 ng-repeat당신이 반복하는 모든 것의 가치를 결과에 따라 스타일을 적용 ng-checked하는 ng-class데 활용 하는 것입니다.
나는 최근에 비슷한 일을했고 그것은 나를 위해 일했습니다.
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
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 };
'Program Tip' 카테고리의 다른 글
| 정적으로 링크 된 라이브러리 간의 기호 충돌을 처리하는 방법은 무엇입니까? (0) | 2020.10.14 |
|---|---|
| char의 기본값은 무엇입니까? (0) | 2020.10.14 |
| Python 다중 처리를 시도하는 Windows의 RuntimeError (0) | 2020.10.14 |
| Notepad ++ v6.6.8에서 두 파일을 비교하는 방법 (0) | 2020.10.14 |
| UIPanGestureRecognizer를 사용하여 개체를 이동하는 방법은 무엇입니까? (0) | 2020.10.13 |