AngularJS 라디오 버튼과 다중 선택 상자는 양방향 동적 바인딩을 구현합니다._AngularJS
- WBOY원래의
- 2016-05-16 15:20:041417검색
AngularJS의 양방향 데이터 바인딩에 관해서라면 누구나 분명히 ng-model 지시어를 떠올릴 것입니다.
1.NG 모델
ng-model 지시문은 입력, 선택, 텍스트 영역 또는 사용자 정의 양식 컨트롤을 포함하는 범위의 속성에 바인딩하는 데 사용됩니다. 현재 범위의 연산 표현식 값을 지정된 요소에 바인딩합니다. 속성이 없으면 암시적으로 생성되어 현재 범위에 추가됩니다.
범위의 속성 대신 범위의 데이터 모델 내에서 속성을 바인딩하려면 항상 ng-model을 사용하세요. 이렇게 하면 범위 또는 하위 범위에서 속성 재정의를 피할 수 있습니다.
<input type="text" ng-model="modelName.somePrototype" />
2. 유형=”라디오”
value 속성을 통해 선택된 상태에서 해당 값을 지정하고, ng-model을 사용하여 $scope의 속성에 라디오 버튼을 매핑함으로써 type="radio"일 때 양방향 동적 바인딩을 구현합니다.
<input type="radio" name="sex" value="male" ng-model="person.sex" />男 <input type="radio" name="sex" value="female" ng-model="person.sex" />女
3. type="체크박스"
AngularJS에 내장된 명령어인 ng-true-value 및 ng-false-value를 사용하여 선택 상태와 선택 해제 상태의 다중 선택 상자에 해당하는 값을 지정한 후 ng-model을 사용하여 해당 값에 대응합니다. $scope의 속성입니다. 이는 type="checkbox"의 양방향 동적 바인딩을 실현합니다.
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
4. 전체 예시
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>radio & checkbox</title>
<script type="text/javascript" src="angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女
<input type="text" ng-model="person.sex" />
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
<span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.person = {
sex: "female",
like: {
pingpong: true,
football: true,
basketball: false
}
};
});
</script>
위 내용은 AngularJS 라디오 버튼과 다중 선택 상자의 양방향 동적 바인딩에 대한 관련 소개입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.