James D. James D. -3 years ago 166
AngularJS Question

How to use 'as' with ng-model in UI-SELECT, AngularJS?

I am trying to use ng-model in ui-select.
In order to use it in the , I somehow have to use 'as' in order to save via PHP.

However, I don't think I am using the correct syntax.

The below code, I have "as ABC" for ng-model="customer.selected" to be called as something else.

<ui-select ng-model="customer.selected as ABC" theme="bootstrap">
<ui-select-match placeholder="">{{$select.selected.customer_company_name}}</ui-select-match>
<ui-select-choices repeat="customer in customers | filter: $select.search">
<div ng-bind-html="customer.customer_company_name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>


The result is: not recognizing 'ABC'.

If there is any other way to reach the result, please advise me. I am totally lost here. I hope this helps the others who struggles with the same issue as I.

Thank you in advance and have a good day!

Answer Source

The as syntax is not mean't for ng-model, it is only meant for ng-controller, so that you can reference the controller name in a short form. Here is a working example which you can reference when writing your code.

JSFiddle Demo

JS:

var app = angular.module('app', ['ui.select', 'ngSanitize']);

app.controller("myCtrl", function() {
  vm = this;
  vm.isLoaded = false;
  vm.customers = [{
    'customer_company_name': 'Kevin'
  }, {
    'customer_company_name': 'Fiona'
  }];
  vm.selected;
});

HTML:

<div ng-app="app" ng-controller="myCtrl as vm">
  <ui-select ng-model="vm.customer.selected" theme="bootstrap">
    <ui-select-match placeholder="">{{$select.selected.customer_company_name}}</ui-select-match>
    <ui-select-choices repeat="customer in vm.customers | filter: $select.search">
      <div ng-bind-html="customer.customer_company_name"></div>
    </ui-select-choices>
  </ui-select>
  {{vm.customer.selected}}
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download