Angular ui-select: How to bind only selected value to ng-model

后端 未结 4 2271
借酒劲吻你
借酒劲吻你 2021-02-19 18:43
$scope.property = new Property();
$scope.property.propertyType = {};

$scope.propertyTypes = [
    { value: \'ResidentialPlot\', name: \'Residential Plot\' },
    { valu         


        
相关标签:
4条回答
  • 2021-02-19 18:51

    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>
    
    0 讨论(0)
  • 2021-02-19 19:09

    You can use the select as notation:

    repeat="propType as propType.value for propType in propertyTypes"
    
    0 讨论(0)
  • 2021-02-19 19:10

    I had the same problem. I looked up the documentation in:

    https://github.com/angular-ui/ui-select/wiki/ui-select-choices

    The best way to do this is:

    <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>

    Note how we are able to specify value.id in repeat while still using value.name for what is shown within the combo box. This will work with ng-model being set to the value.id (whatever was saved).

    I verified this works for me. Posting here because Google brings people to this page.

    0 讨论(0)
  • 2021-02-19 19:18

    You don't need $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> 
    
    0 讨论(0)
提交回复
热议问题