angularjs – 角度ui-select：如何仅将所选值绑定到ng模型

发布时间：2020-12-17 09:41:40 所属栏目：安全来源：网络整理

导读：$scope.property = new Property();$scope.property.propertyType = {};$scope.propertyTypes = [ { value: 'ResidentialPlot',name: 'Residential Plot' },{ value: 'CommercialPlot',name: 'Commercial Plot' },{ value: 'Apartment',name: 'Apartment/Fla

$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: '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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!