I have read it 에 대한 다른 글, 하지만 난 couldn& 알아내봐 t # 39.
나는 어레이에서는,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
I want to 렌더링합니다 다음과 같습니다.
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
또한 내가 원하는 옵션을 선택할 수 있는 ID = 000002.
이거 드세요.
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
>. 어레이용 데이터 소스:
>. - 어레이당 레이블에만 value
>. 객체의 데이터 소스:
>. - 라벨 (키, 가치) 에 객체에는
select 를 라벨 (키, 가치) 에 객체에는
레이블 그룹 (키, 가치) 에 객체에는 그룹순
select 를 그룹순 레이블 그룹의 객체 (key, 값)
일부 분류 켜짐이 옵션에만 태그번호 값을 앙굴라이스:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
위의 '$ 스코프스셀치디템' 로 전체 오브젝트에 직접 선택할 수 있게 해준다. 와 # 39 는 요점이지 앙굴라이스 전날에약혼자에게 don& what& # 39 의 in your 옵션에만 태그이고, 걱정할 필요가 없다. 이제 잘 처리할 앙굴라이스. s # 39 만 신경 모델에서 in your scope. what& 합니다.
[이것은 프룬커 비헤이비어를 시연 및 표시, 위와 같은 HTML 기록되었으므로 아웃해야] (http://plnkr.co/edit/SxIvt4KThWLtWvh3PnOh? p = 미리 보기)
다루는 기본 옵션:
이렇게 하려면 간단한 추가에는 ng init 설정하는 '' 모델 ("에서 ng 모델 ')' 의 첫 번째 요소에 너회의 리피팅 항목에서와 ng 옵션 ':
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
참고: 이 경우 받을 수도 있다 ',' 변화가 발생합니까 제대로 뭔가 좀 제정신이 foo 초기화되어야 " falsy". 이 경우, 처리할 수 있는 'foo' ll want to # 39 you& 초기화하지 컨트롤러이면 가능성이 높다.
이것은 조금 다릅니다. all you need to do 는 여기에 추가 옵션으로 선택, 비어 있는 속성 값을 너회의 태그번호 자식으로 사용자정의할 관심용 통해 내부 텍스트:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
참고: 이 경우 " empty"; 거기 옵션은 후에도 다른 옵션을 선택합니다. # 39 이 isn& 사례, t 의 기본 비헤이비어를 선택함 go-dell 앙굴라이스.
그 후 기본 옵션으로 선택 항목이 made: 감춰집니다 사용자정의된
그들이성년에 사용자정의된 없어질 경우 기본 옵션으로 선택한 후 속성 값을 데이터베이스에구성원을 기본 옵션으로 ng 숨기십시오 추가할 수 있습니다.
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>
나는 내 테스트 2 listbox: 자동차 및 자동차 모델을 만든다. 일부 모델을 만들 때까지 나열하십시오 비활성화되었습니다 선택되었음. 이것은 나중에 재설정하지 listbox 는 선택물 있는 경우 (& # 39 를 선택한 설정되었습니다 Make& # 39;) 그 다음 모델을 다시 listbox 비활성화되면 선택물 재설정됩니다 (# 39, & # 39 를 선택, Model&) 뿐만 아니라. 그냥 직접 만드는 동안 읽어들여집니다 리소스에는 모델은 있다.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
나를 통해 몇 가지 이유로 앙굴라이스 afaq 혼란스럽다. 그들의 매우 끔찍한 붽뎄 여기있을. 갖가지 itopia 더 좋은 사례가 될 것 "이라고 말했다.
어쨌든, 나는 약간의 변형을 벤 Lesh& # 39 에 대한 답이다.
내 데이터 수집을 다음과 같습니다.
items =
[
{ key:"AD",value:"Andorra" }
, { key:"AI",value:"Anguilla" }
, { key:"AO",value:"Angola" }
...etc..
]
이제
<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>
그 결과 값을 여전히 옵션뿐 인덱스 (0, 1, 2 등).
<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>
이것은 내가 더 자주 있겠냐 추가할 것, 그래서 저는 이 목록을 선택합니다 에 객체에는 배열입니다 너희에게베풀어진 하나!
<select name="test">
<option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>
문제는 이미 답변됨 (브트와, 정말 유익하고 포괄적인 제공한 오토메이티드 벤) 이지만, 추가할 수 있는 또 다른 요소를 싶다 완전성을 위해 매우 유용합니다.
예를 들어, 제안한 벤.
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
다음 노고티언스 양식 사용되어 왔다. '가치' 로 선택할 라벨 어레이당.
, 는 될 수 있는 레이블, 라벨, < option> 표현식에서는 '결과' 요소. 이 경우, 더 복잡한 옵션을 특정한 문자열 연결을 위해서는 반드시 수행할 수 있는 축제.
예를 들면 다음과 같다:
예를 들어, 필터링합니다 사용할 수도 있습니다.
커피스크립트 에서:
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>
필요할 경우 각 옵션마다 사용자 정의 제목 ',' ng 옵션 적용되지 않습니다. Ng 반복하십시오 '대신' 을 (를) 사용 옵션:
<select ng-model="myVariable">
<option ng-repeat="item in items"
value="{{item.ID}}"
title="Custom title: {{item.Title}} [{{item.ID}}]">
{{item.Title}}
</option>
</select>
이 유용할 수 있습니다. 바인딩 항상 작동합니까 마십시오.
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products"></select>
예를 들어, 원본 모델을 나열하십시오 칠합니다 옵션뿐 미삭 서비스용입니다. 채우기 전에 선택한 가치를 목록 및 it 설정되었습니다 알려졌다. Http 요청을 실행하는 옵션을 후 나머지 $ 로 목록에 완료되어도.
그러나 선택한 옵션에 설정되어 있지 않습니다. 알 수 없는 이유로 앙굴라이스 태양으로하여 에서 $ 다이제스트 실행 바인딩하지 언약보다는 선정된 바람직하다. 저는 jQuery 를 선택한 설정되었습니다 잡을라는데 사용할 수 있습니다. 응급상황입니다! 섀도우) 의 값에 대한 속성 " 자도으로 앙굴라이스 접두사입니다 value"; 에 의해 생성된 ng 반복하십시오 옵션. Int 대한 것은 number:" ";).
$scope.issue.productId = productId;
function activate() {
$http.get('/product/list')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$('#product').val('number:'+productId);
}, 200);
}
});
}