CODEWITHSUNDEEP
javascripthtmlangularjs
ANKIT
ANKIT

Reputation: 461

Options with hierarchical data not selecting

I am trying run this sample to select an option from a select with hierarchical data but it's not working.

    $scope.options = [
      { id: 1, info: { label: "Item 1" } },
      { id: 2, info: { label: "Item 2" } },
      { id: 3, info: { label: "Item 3" } }
    ];


        angular.module("selectOptionsTest", [])
            .controller("SelectOptionsController", ["$scope", function ($scope) {

                $scope.options = [
                  { id: 1, info: { label: "Item 1" } },
                  { id: 2, info: { label: "Item 2" } },
                  { id: 3, info: { label: "Item 3" } }
                ];

                $scope.selectopt = function () {
                    $scope.opt = { id: 1, info: { label: 'Item 1' } };
                };

            }]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js">
    </script>
    <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
        <select ng-model="opt"
                ng-options="option.id as option.info.label for option in options"></select>
        <input type="button" ng-click="selectopt()" value="select" />
    </div>

Edit 1:

Here I am adding my code that mostly similar to plunker code.

Controller code:

(function () {
    'use strict';
    angular
    .module('app.module')
    .controller('SomeController', SomeController);

    SomeController.$Inject = [
        '$scope'
    ];

    function SomeController(
        $scope
    ) {

        $scope.GetOptions = function () {
            OptionsService.Get().then(function (response) {
                $scope.Options = response.value;
            }, ErrorHandlerService.ShowError);
        };

        $scope.GetOptions();

        $scope.Edit = function (index) {
            $scope.SelectedOption = $scope.Options[index].id;
        };

    }

})();

Html code:

<select name="Contrato" class="form-control" ng-model="SelectedOption" required autofocus ng-disabled="!IsEditMode"
        ng-options="c.id as c.info.name for c in Options track by c.id">
</select>

Options JSON 

[
    {
      "info":{
        "name":"AAA"
      },"id":1
    },
    {
      "info":{
        "name":"BBB"
      },"id":2
    }
]

Upvotes: 0

Views: 100

Answers (3)

Pankaj Kumar
Pankaj Kumar

Reputation: 881

Just check the foll link...it is getting the hierarchy

https://plnkr.co/edit/VQsJBR2lx7zTJxebriZW?p=preview

<body>
  <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
    <select ng-model="id" ng-options="option.id as option.info.label for option in options"></select>
    <input type="button" ng-click="selectopt()" value="select" />
    <p> Selected:{{opt}}</p>
  </div>
</body>





$scope.selectopt = function() {
          $scope.opt = $scope.options[$scope.id-1];
        };

Upvotes: 0

dowens
dowens

Reputation: 11

With ng-model bound to the select, as soon as you change the select option, the model (opt) will update.

You could use the Select button if you want to take the value of "opt" and use it for something else, or save it, etc. but if all you want to do is change it, then just changing the value in the select is sufficient.

If you want the entire object set to "opt", then change your select to this:

<select ng-model="opt"
            ng-options="option as option.info.label for option in options"></select>

Upvotes: 0

victor175
victor175

Reputation: 624

In your case, the $scope.opt model holds the selection. But you are not really using the whole object when you show it. So $scope.opt does not contain the whole object, only the option.id. So in order for it to work you need to assign an id manually to the model. 

$scope.selectopt = function () {
   $scope.opt = 1;
};

In this case, you assign it 1 and this is the id of the first object in the current options.

Ideally, use a variable instead of hardcoding, like:

$scope.selectopt = function () {
  $scope.opt = $scope.options[0].id;
};

Upvotes: 1

Related Questions