Value of Angular ui-select

Question

In my application have ui-select:

<ui-select ng-model="flat.flatData.type_local" theme="bootstrap">
   <ui-select-match placeholder="Type">
      {{ $select.selected.type }}
   </ui-select-match>
   <ui-select-choices repeat="t in flat.type_local | filter: $select.search">
      {{ t.type }}
   </ui-select-choices>
</ui-select>

After chosing something i want to add value of select to database.

Before i'm using input and dont have a problem with adding to database.

<input type="text" class="form-control input-sm" name="type" ng-model="flat.flatData.type_local" placeholder="Type" required>

This is part of my controller:

angular.module('flatCtrl', ['flatService', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.autoResize', 'ngSanitize', 'ui.select'])
.controller('FlatController', function(Flat, socketio){

    vm = this;

    vm.createFlat = function(){
        vm.message = '';
        Flat.create(vm.flatData)
            .success(function(data){

                // clear up the form
                vm.flatData = '';
                vm.message = data.message;
            });
    };


    vm.type_local = [
        { type: 'One' },
        { type: 'Two' }
    ];

When i click submit i don't have value of this select in database. Don't have flat.flatData.type_local — Eugeniusz Zuev, Jul 19 '15 at 08:24
in input you specified `"flat.flatData.type_local"` and in view its `flat.type_local`, you sure you are binding correctly — vinayakj, Jul 19 '15 at 08:27
can you give bit more information, question in not really clear enough, what do you mean by database, are calling AJAX service and its not firing? — vinayakj, Jul 19 '15 at 08:31

score 0 · Answer 1 · answered Jul 19 '15 at 08:26

0

<input type="text" class="form-control input-sm" name="type" 
       ng-model="flat.type_local" placeholder="Type" required>

answered Jul 19 '15 at 08:26

vinayakj

5,591
3
28
48

Input is working, problem when i use select instead of input – Eugeniusz Zuev Jul 19 '15 at 08:31
in input you specified `"flat.flatData.type_local"` and in view its `flat.type_local`, you sure you are binding correctly in `` – vinayakj Jul 19 '15 at 08:31
flatData using when create object vm.create = function(){ vm.message = ''; Flat.create(vm.flatData) .success(function(data){ // clear up the form vm.flatData = ''; vm.message = data.message; }); }; – Eugeniusz Zuev Jul 19 '15 at 08:35

score 0 · Accepted Answer · edited Jul 20 '15 at 20:29

0

Here is the fix to this issue:

 <ui-select-choices repeat="t.type as t in flat.type_local track by $index | filter: $select.search">

and

 <div ng-bind-html="t.type | highlight: $select.search"></div>

edited Jul 20 '15 at 20:29

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jul 19 '15 at 10:52

Carla França

501
1
4
8

in
Selected: {{ flat.flatData.type_local }}
i have "Selected: {"type":"One"}" May this is problem? – Eugeniusz Zuev Jul 19 '15 at 11:05
You mean you have a pre-selected option? I'm not very familiar with ui-select but in a regular selection I would use ng-init to set a pre selected option. I updated the jsfiddle. It doesn't affect the form submission. Try to remove and test it. – Carla França Jul 19 '15 at 11:15
no, "Selected: {"type":"One"}" i have after chosing option. In your code you have "Selected: One" – Eugeniusz Zuev Jul 19 '15 at 11:18
ahh I get it. It could be. – Carla França Jul 19 '15 at 11:24
Can you console.log your data vm.flatData before Flat.create(vm.flatData). like I said before maybe something to do with the data you are sending. – Carla França Jul 19 '15 at 11:37
in console i have something like this - position1: 1, position2: 2, position3: 3, type_local: Object$$hashKey: "object:21"type: "One"......where is position - it's inputs – Eugeniusz Zuev Jul 19 '15 at 11:56
value of every input - is a string, and value of my select is object with key and value – Eugeniusz Zuev Jul 19 '15 at 11:57
That is the issue. you have to have the select as a string as well. Review your ui-select structure. Can you test to add track by $index. or maybe track by type so you will have the right value. – Carla França Jul 19 '15 at 12:08
not working...trying to do something like this: http://stackoverflow.com/questions/28142929/angular-ui-selet-how-to-bind-only-selected-value-to-ng-model – Eugeniusz Zuev Jul 19 '15 at 13:03
but dont know how to do it in my project – Eugeniusz Zuev Jul 19 '15 at 13:04
Here are the changes you have to implement. and
– Carla França Jul 19 '15 at 13:47
@MartijnPieters I guess you didn't have time to read the comments. The code to fix was posted only 2 comments above yours not in the fiddle. This point down came as a surprise as Eugeniusz and I spent a good amount of time trying to figure this out in the dark because he couldn't show more code. Anyway base on the "-1" punishment I figured out that the right answer were a bit lost in the comments so I decided to open another answer to give it more visibility. At the end of the day we are not here for the points but to help each other right ;-) – Carla França Jul 20 '15 at 18:14
@CarlaFrança: solutions don't really belong in comments; you can just *edit* your existing answer to update it (I've done so for you now). You could try and *explain* why your solution works, currently it is just a (small) code-dump without any explanation as to why this is the fix. – Martijn Pieters Jul 20 '15 at 20:31

Value of Angular ui-select

2 Answers2