CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui
Gillardo
Gillardo

Reputation: 9828

Angular UI Select-UI not updating model on select?

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

Upvotes: 1

Views: 3638

Answers (3)

Bogdan T Stancu
Bogdan T Stancu

Reputation: 404

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
  });

Upvotes: 0

machaj
machaj

Reputation: 288

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

Upvotes: 1

Khaled Awad
Khaled Awad

Reputation: 1834

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

Upvotes: 0

Related Questions