Select list dynamically filled option selected with AngularJs

Question

Select list dynamically filled option selected with AngularJs

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I need to bring a select option with the selected option being populated dynamically.

I have in my controller filling the list like this:

$scope.$watch('IdCategoria', function() {
            $http.get("/api/Categoria/GetList", {  }).success(function(response) {
                $scope.categorias = response;
            });
        });

And my select looks like this:

<select ng-model="newCtrl.IdCategoria" required class="form-control" data-live-search="true" ng-options="c.Value as c.Text for c in categorias">
<option value="">Selecione uma categoria</option>
</select>

Where newCtrl.IdCategoria is the field with Id of the selected category, in which select should be selected.

I read here in the Stack that using track by should work, but if I set track by newCtrl.IdCategoria , both editing and registering I can not select another option. p>

I've also tried using ng-init , but also to no avail:

ng-init="newCtrl.IdCategoria= newCtrl.categorias[newCtrl.IdCategoria]"

Remembering that my categories are:

[{"Value":"24","Text":"Categoria 1"},{"Value":"25","Text":"Categoria 2"}]

EDIT1 I have tested this way

<select ng-model="newCtrl.IdCategoria" required class="form-control" data-live-search="true">
<option value="">Selecione uma categoria</option>
<option ng-repeat="c in categorias" value="{{c.Value}}">{{c.Text}}</option>
</select>

angularjs selecteditem selected-option

asked by anonymous 24.03.2016 / 15:21

3 answers

Subquery in select clause with Criteria JPA Is it possible to place more than the 3 default images in the presentation of magento products? [closed]

score 0 · Answer 1

Inside your controller:

$scope.$watch('IdCategoria', function() {
            $http.get("/api/Categoria/GetList", {  })
            .success(function(response) {
                if (response.length > 0) {
                     response.unshift({"Value":"0", "Text":"Selecione uma categoria"});
                   $scope.categorias = {
                                         availableOptions: response,
                                         selectedOption: {
                                             Value: response[0].Value,
                                             Text: response[0].Text
                                        }
                                    };
               }
            });
        });

Then in the view:

<div ng-controller="newCtrl as ctrl">

   <select name="selecao" class="form-control" id="selecao" required class="form-control" data-live-search="true"
      ng-options="option.Text for option in ctrl.categorias.availableOptions track by option.Value"
      ng-model="ctrl.categorias.selectedOption"></select>

Remembering that this will only scroll if there is an interaction in this "CategoryId" element that I have no idea what it is and where you are interacting it, since the $ watch function is to listen for the element when it is changed:

See an example:

angular
  .module('seuApp', [])
  .controller('ACtrl', function ($scope) {
    $scope.collection = [];
  })
  .controller('BCtrl', function ($scope) {
    $scope.$watch('nome.input', function (newValue, oldValue) {
         console.log('escutando elemento, valos novo: ' + newValue);
    });
  });

And in HTML:

  <html ng-app="seuApp">
      <body ng-controller="ACtrl">
        <div ng-repeat="(key, nome) in collection" ng-controller="BCtrl">
          Nome {{key}}: <input ng-model="nome.input" ng-change="doSomething()">
          <br />
         Olá seu nome é {{ nome.input }}
        </div>
        <button ng-click="collection.push([])">Incluir nome</button>
      </body>
    </html>

Look at the JSFIDDLE (1) and JSFIDDLE (2)

score 0 · Answer 2

Ivan,

Your json is coming value as a string, check if your CategoryID is a string or an integer, if they are of incompatible types you will have to either change their service and bring the values of the same types, or change in the interface, using a toString or parseInt, the most correct way is to change the service, after you do this the second option you tried value="{{c.Value}}" should work.

It's worth a look here too:

link

score 0 · Answer 3

Try this

<select ng-model="newCtrl.IdCategoria" required class="form-control" data-live-search="true" ng-options="c.Value as c.Text for c in categorias">
<option value="">{{newCtrl.IdCategoria ? newCtrl.IdCategoria : "Selecione uma categoria"}}</option>
</select>

newCtrl.IdCategory is not empty if empty appears Select a category