Angular UI Select-UI not updating model on select?

Question

I would like to create a wrapper for select-ui, as my items will load from the same place, so will put this in a directive instead of putting it all over my site, plus since i am using the same control in all places, if we update it in future, i would only like to update it in one place.

I have built a wrapper, but for some reason the value in the select is not being updated.

Here is a plunkr, with example code

http://plnkr.co/edit/QZP0MsDQOmafOW3dcfhT?p=preview

To use the ui-select you simply do

<div dropdown-select ng-model="input"></div>

EDIT:

May i am not making myself clear, but i would like to use ng-model on the wrapper directive called dropdown-select. I do NOT want to have to use the same scope variable names when i use this dropdown-select.

For example, if i use ng-model on an input, i can do

<input ng-model="input1" />
<input ng-model="myVarName" />
<input ng-model="somethingDifferent" />

All three of the above examples will work and each one of them will hold my value from the input.

Now i would like to be able to do the same thing with the wrapper directive i have used, just like you can do with ng-model on inputs and other controls.

So i should be able to do

<div dropdown-select ng-model="input1"></div>
<div dropdown-select ng-model="myItem"></div>
<div dropdown-select ng-model="whateverIWant"></div>

Now the select-ui should populate the selected item into these scope variables, once the value is selected.

Here is a plunkr with 2 instances of the dropdown-select wrapper, and neither one of them show the selected value when the select-ui value is selected.

http://plnkr.co/edit/k6Bb4MRqNwD8Ar1HVMJU?p=preview

machaj · Accepted Answer · 2014-12-04 16:15:06Z

1

try to add .id into ng-model attribute in the directive template. (You can use any other key, like .data)

template: '<ui-select ng-model="ngModel.id">' + ....

If you want to set initial value in your controller you have to add something like this:

$scope.input = {"id":{"id":2,"name":"item 2"}};

Where first the first id key is the one which is used in ng-model.

http://plnkr.co/edit/1t4kKYnU0PFYXRP3vQAP?p=preview

answered Dec 4, 2014 at 16:15

machaj

2882 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khaled Awad · Accepted Answer · 2014-11-26 17:49:05Z

0

This is the solution!

Fix your JS to be

     angular.module('dgUi', ['ui.select', 'ngSanitize'])

        .config(['uiSelectConfig', function(uiSelectConfig){
          uiSelectConfig.theme = 'bootstrap';
        }])

        .controller('BaseController', ['$scope', function($scope) {
          // changed here to use $scope.data instead of $scope.input
          $scope.data = {"results":{
              id:0, 
              name:'item0'}
          };
        }])

        .controller('DropdownSelectController', ['$scope', function ($scope) {
          $scope.items = [];

          $scope.refresh = function (text) {
                $scope.items = [];

                for (var i = 0; i < 100; i++) {
                  $scope.items.push({id: i, name: 'item ' + i});
                }
          };
        }])

        .directive('dropdownSelect', function () {
            'use strict';

        // do not want to change ng-model="input.name" to anything else as
        // this should be a directive and cannot be changed

            return {
                restrict: 'A',
                scope: false,
                controller: 'DropdownSelectController',
                template: '{{data.results}}<ui-select ng-model="data.results">' +
                               '<ui-select-match placeholder="Enter an address...">{{$select.selected.name}}</ui-select-match>' +
                               '<ui-select-choices repeat="item in items track by $index"' +
                               '    refresh="refresh($select.search)"' +
                               '    refresh-delay="0">' +
                               '   <div ng-bind-html="item.name | highlight: $select.search"></div>' +
                               '</ui-select-choices>' +
                           '</ui-select>',
                link: function (scope, element, attrs, ctrl) {

                }
            }
        });

your HTML will be

value in $scope.input: {{ data.results }}

<div class="form-group" style="width:300px">
  <label>select an item</label>

  <!-- changed here to show data -->
  <div dropdown-select ></div>
</div>

Working example:

http://plnkr.co/edit/VuktEq?p=info

edited Nov 26, 2014 at 17:49

answered Nov 26, 2014 at 8:42

Khaled Awad

1,8741 gold badge12 silver badges24 bronze badges

15 Comments

Gillardo Over a year ago

This works if the name of the ng-model equals input. But if i change the index.html page to use ng-model="data", and set $scope.data instead of $scope.input, it doesnt work

Khaled Awad Over a year ago

This shouldn't be a problem. Make sure that you changed the $scope.input in the "BaseController"

Gillardo Over a year ago

Nope, doesnt work. Changed index.html to ng-model="data" and baseController to $scope.data = . Now not working

Gillardo Over a year ago

No i didnt fprgot. Its a directive see the comment. It shouldnt have to change. What if i pass in one model called input and the other called data? It doesnt work

Khaled Awad Over a year ago

Line 37 in your app.js still have the variable "input" instead of "data" ... anyways I have updated another Plunker plnkr.co/edit/VuktEq?p=info have a look

|

Bogdan T Stancu · Accepted Answer · 2017-06-30 16:39:44Z

0

For me it was the element that was not updating the text and I used it like so:

$timeout(function () {
    $('#ownerdetail').trigger("create");
    $('#selectdcontact').selectmenu().selectmenu('refresh'); //This solves it
    $('#selectdcust').selectmenu().selectmenu('refresh'); //This solves it
  });

answered Jun 30, 2017 at 16:39

Bogdan T Stancu

4045 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular UI Select-UI not updating model on select?

3 Answers 3

Comments

15 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest