$scope.property = new Property();
$scope.property.propertyType = {};
$scope.propertyTypes = [
{ value: 'ResidentialPlot', name: 'Residential Plot' },
{ value: 'CommercialPlot', name: 'Commercial Plot' },
{ value: 'Apartment', name: 'Apartment/Flat' },
{ value: 'Townhouse', name: 'Townhouse' },
{ value: 'House', name: 'Single Family House' },
{ value: 'Commercial', name: 'Commercial Property' }
];
<label for="ptype" class="col-sm-2 control-label">Property Type</label>
<p>Populated: {{property.propertyType}}</p>
<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type">
<ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="propType in propertyTypes">
<span ng-bind-html="propType.name"></span>
<small ng-bind-html="propType.value"></small>
</ui-select-choices>
これは私に与えます:
$scope.PropertyType = {"value":"Apartment","name":"Apartment/Flat"}
私のスキーマのPropertyTypeは単なる文字列なので、選択したJSONアイテムではなく選択した値をバインドします。
$scope.PropertyType = "Apartment"
これを取得するには、ngモデルに何をバインドする必要がありますか?
選択入力でng-model属性をselected_propertyType
に変更し、それが変更されたときに監視し、値を抽出してpropertyType
に割り当てる必要があります。
$scope.property = new Property();
$scope.property.propertyType = {};
$scope.propertyTypes = [
{ value: 'ResidentialPlot', name: 'Residential Plot' },
{ value: 'CommercialPlot', name: 'Commercial Plot' },
{ value: 'Apartment', name: 'Apartment/Flat' },
{ value: 'Townhouse', name: 'Townhouse' },
{ value: 'House', name: 'Single Family House' },
{ value: 'Commercial', name: 'Commercial Property' }
];
$scope.$watch('selected_propertyType',function(newValue,oldValue){
if (newValue && newValue!=oldValue){
$scope.propertyType = $scope.selected_propertyType.value;
}
})
<label for="ptype" class="col-sm-2 control-label">Property Type</label>
<p>Populated: {{property.selected_propertyType}}</p>
<ui-select ng-model="property.selected_propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type">
<ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="propType in propertyTypes">
<span ng-bind-html="propType.name"></span>
<small ng-bind-html="propType.value"></small>
</ui-select-choices>
$ watchは必要ありません。
<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type">
<ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="propType.value as propType in propertyTypes track by $index | filter: $select.search">
<div ng-bind-html="propType.value | highlight: $select.search"></div>
</ui-select-choices>
私も同じ問題を抱えていました。私はドキュメントを調べました:
https://github.com/angular-ui/ui-select/wiki/ui-select-choices
これを行う最良の方法は次のとおりです。
<ui-select ng-model="animal.names"> <ui-select-match>{{$select.selected.name}}</ui-select-match> <ui-select-choices group-by="groupFind" repeat="value.id as value in animals | filter: $select.search"> <div ng-bind-html="value.name | highlight: $select.search"></div> </ui-select-choices> </ui-select>
コンボボックス内の表示にvalue.nameを使用しながら、繰り返しでvalue.idを指定できることに注意してください。これは、ng.modelがvalue.id(保存されたもの)に設定されている場合に機能します。
これが機能することを確認しました。 Googleがこのページにユーザーを誘導するため、ここに投稿します。
select as
表記:
repeat="propType as propType.value for propType in propertyTypes"