Angularjs: How to make ui-select have only one way model biding?

Question

With the angularjs navite select directive the model binding is only one way while in ui-select this seems to always be two way binding.

  <ui-select ng-model="uiSelected.animal">

    <ui-select-match>
            <span ng-bind="$select.selected.name"></span>
     </ui-select-match>

    <ui-select-choices repeat="animal in (animals | filter: $select.search) track by $index">
        <span ng-bind="animal.name"></span>
    </ui-select-choices>

</ui-select>

Here's the plunker showcasing my problem: https://plnkr.co/edit/FkZsFcMrTveWjXR5HNyT?p=preview

My issue:

How do I make ui-select to only have a one way biding with the model, so that when I alter the selected scope model it is not binded to the ui-select? If I rephrase: how do I make ui-select act like angular native select?

score 3 · Answer 1 · answered May 12 '16 at 11:29

3

Use unidirectional binding with this,

{{::animal.name}}

answered May 12 '16 at 11:29

Vinay

548
2
12

Hmm I really like this simple approach. The problem is that my models still remain binded and I need to post them to an REST endpoint later. Is there a way to have this unidirectional binding not just for the view but for the model as well? – ccostel May 12 '16 at 11:51
@ccostel Try isolating your scope value.. check this article http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ – Vinay May 12 '16 at 11:57

Nils · Accepted Answer · 2016-05-12T11:28:06.500

1

You might have to add a $watch to the animal/car and save your selected object in a different $scope variable. I don't see another way, since uiSelected references on an object in animals array.

Use on-select event:

on-select="onSelectCallback($item, $model)"

Have a look at this plunker: https://plnkr.co/edit/Zcb9xlPm6TW7DFk1sjAO?p=preview

edited May 12 '16 at 11:28

answered May 12 '16 at 11:10

Nils

879
1
9
19

Thank you for the suggestion. I thought of this. But to be honest I feel like this is a bit of a dirty fix. Since my models can be dynamically extended in numbers it would be great if there was a tidier way of fixing this. – ccostel May 12 '16 at 11:53
Sorry ccostel, but since you use a custom directive (ui-select), I fear it is not possible to change model binding. ui-select does bind the selected value directly to it's ng-model attribute. uiSelected.animal references on a item in the $scope.animals array. if the object inside the array changes, this will directly influence the uiSelected.animal, since it's only a reference, not a copy of the object. – Nils May 12 '16 at 12:12

Angularjs: How to make ui-select have only one way model biding?

2 Answers2