角UI的选择：如何唯一入选的值绑定到NG-模型 [英] Angular ui-select: How to bind only selected value to ng-model

问题描述

$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"}

属性类型在我的模式只是一个字符串，所以我要绑定选择的值，而不是选择JSON项目。

PropertyType in my schema is just a string so I want to bind selected value instead of selected JSON Item.

$scope.PropertyType = "Apartment"

我要绑定到我的NG-模型得到​​什么呢？

What should I bind to my ng-model to get this?

推荐答案

您需要在您的选择输入的NG-模型属性更改为 selected_propertyType ，当它看着它变化，然后提取值，并将其分配给属性类型

You need to change in your select input the ng-model attribute to selected_propertyType and watch it when it changes, then extract value and assign it to 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>

这篇关于角UI的选择：如何唯一入选的值绑定到NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！