angular 명령 노트 ng-options 사용 방법
10160 단어 angularng-options
표현 식 에서 배열 이나 대상 을 사용 하여 selection 의 option 목록 을 자동 으로 생 성 합 니 다.ng-options 는 ng-repeat 와 비슷 해서 ng-repeat 로 ng-options 를 대체 할 때 가 많다.그러나 ng-options 는 메모리 의 속 도 를 줄 이 고 선택 상자 의 옵션 을 제공 하여 사용자 가 선택 할 수 있 도록 좋 은 점 을 제공 합 니 다.select 에서 선택 하면 이 옵션 은 ng-model 을 사용 하여 해당 데이터 에 자동 으로 연 결 됩 니 다.기본 값 을 설정 하려 면$scope.selected=$scope.collection[3]을 사용 하 십시오.
1.1 track by 의 용도:
track by 는 주로 값 이 중복 되 는 것 을 방지 하고 angularjs 가 잘못 보고 할 수 있 습 니 다.angularjs 는 생 성 된 dom 와 연결 되 어 데 이 터 를 추적 할 수 있 는 유일한 값 이 필요 하기 때 문 입 니 다.예 를 들 어 items=["a","a","b"]는 ng-repeat="item in items"가 잘못 되 고 ng-repeat="(key,value)in items track by key"를 사용 하면 오류 가 발생 하지 않 습 니 다.
1.2 ng-option 사용 주의
사용 시 ng-model 명령 을 추가 해 야 합 니 다.그렇지 않 으 면 사용 할 수 없 으 면 오류 가 발생 합 니 다.
2.select 드 롭 다운 상자 에서 label 과 value 는 각각 무엇 을 대표 합 니까?
가장 간단 하고 원시 적 인 select 드 롭 다운 상 자 를 먼저 쓰 세 요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label value </title>
</head>
<body>
<select>
<!--
value ，label
value 1、2、3、4 ；
lable " " “ ”
-->
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label value </title>
<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mainCtrl">
<select>
<!--
value ，label
value 1、2、3、4 ；
lable " " “ ”
-->
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
</select>
<br>
<br>
<br>
<div>{{ selectedCity }}
<br>
<!-- c.id as c.city for c in obj obj id select value， obj city select label -->
<select ng-options="c.id as c.city for c in obj" ng-model="selectedCity">
</select>
</div>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('mainCtrl', ['$scope', function($scope) {
$scope.selectedCity = "bj";
$scope.obj = [
{ "id": "bj", "city": " " },
{ "id": "sh", "city": " " },
{ "id": "zz", "city": " " }
];
}])
</script>
</body>
</html>
3.세 가지 ng-options 상용 방법:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label value </title>
<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
<style type="text/css">
.mart30 {
margin-top: 30px;
border-top: 1px solid #000;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="mainCtrl">
<select>
<!--
value ，label
value 1、2、3、4 ；
lable " " “ ”
-->
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
</select>
<div class="mart30">
<h3> label value </h3> {{ selectedCity }}
<!-- c.id as c.city for c in obj obj id select value， obj city select label -->
<select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
</select>
</div>
<div class="mart30">
<h3>1. “ ” </h3>
<p> ： laber for value in array</p>
<select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
<br>
</div>
<div class="mart30">
<h3>2. “ ” “label value ” </h3>
<p> ： select as label for value in array</p>
<p> ？ ：{{selectedStu}}</p>
<select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
<br>
<br>
<br>
<p><strong> </strong></p>
<p> ？ ：{{selectedStuString}}</p>
<p> ： </p>
<select ng-options="c.name as (c.name +'- ：'+c.id) for c in obj2" ng-model="selectedStuString"></select>
<br>
<br>
<br>
<p><strong> group by </strong></p>
<p> ：label group by groupName for value in array</p>
<p> ？ ：{{selectedStuString2}}</p>
<select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
</div>
<div class="mart30">
<h3>3. “ ” </h3>
<p> 1： label for (key , value) in object</p>
<p> ？ ：{{scity}}</p>
<select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
<p> 2： select as label for (key ,value) in object</p>
<p> ？ ：{{scity01}}</p>
<select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
</div>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('mainCtrl', ['$scope', function($scope) {
// obj1
$scope.obj1 = [
{ "id": "bj", "city": " " },
{ "id": "sh", "city": " " },
{ "id": "zz", "city": " " }
];
$scope.selectedCity = "bj";
//
$scope.arr1 = [" ", " ", " "];
// “ ”
$scope.selectedAnimal = " ";
// obj2
$scope.obj2 = [
{ "id": "lilei", "name": " ", "sex": "man" },
{ "id": "hanmeimei", "name": " ", "sex": "woman" },
{ "id": "jack", "name": " ", "sex": "man" }
];
$scope.selectedStu = " ";
// obj3
$scope.obj3 = {
" ": " ",
" ": " ",
" ": " "
};
}])
</script>
</body>
</html>
4.ng-options 모든 용법 보충
빨간색 부분 은 코드 에 예 가 있 으 며,나머지 는 스스로 이해 테스트 를 소화 하 십시오.
배열 에 대하 여:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Angular에서 타사 스크립트 및 CSS 작업Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
