How to get a variable from Object as ng-model using angular

Question

I am using ng-repeat for list of options.In that list I have ID and DESCRIPCION,when select one option am appending ID and DESCRIPCION to ng-model like as Object.In controller part need to ceperate ID and DESCRIPCION.I used below code but getting undefined in alert when select one option.

http://jsfiddle.net/KN9xx/1237/

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="FirstCtrl">
    <select class="form-control selectpicker"  data-live-search="true"   ng-model="subappData" ng-change="getSubApplicationDetails(subappData)" id="subapplicationid" style="height: 21px;width: 300px;-moz-margin-start: 132px;margin-left: 138px;margin-top: 2px;-moz-margun-start: 132px;">
         <option value="">Select</option>
      <option  ng-repeat='subapp in subapplicationList | filter:query' data-select-watcher data-last="{{$last}}" value = "{{subapp}}"> <a href="#"> {{subapp.ID}} - {{subapp.DESCRIPCION}} </a> </option>
               </select>

</div>

controller.js:

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
   $scope.subapplicationList = [
  {"ID" :  9 ,"DESCRIPCION" : "a" },
  {"ID" :  1 ,"DESCRIPCION" : "b" },
  {"ID" :  2 ,"DESCRIPCION" : "c" },
  {"ID" :  3 ,"DESCRIPCION" : "d" },
  {"ID" :  4 ,"DESCRIPCION" : "e" },
  {"ID" :  5 ,"DESCRIPCION" : "f" },
  {"ID" :  6 ,"DESCRIPCION" : "g" },
  {"ID" :  7 ,"DESCRIPCION" : "h" },
  {"ID" :  8 ,"DESCRIPCION" : "i" }
  ];
   $scope.getSubApplicationDetails = function(subappData) {
   alert(JSON.stringify(subappData));
  };
});
myapp.directive('selectWatcher', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            var last = attr.last;
            if (last === "true") {
                $timeout(function () {
                    $(element).parent().selectpicker('val', 1);
                    $(element).parent().selectpicker('refresh');

                });
            }
        }
    };
});

your fiddle is working fine and is showing the correct id and description as selected in select option. — abhit
– abhit, Commented Apr 28, 2017 at 6:17
As always, and as documented... use ng-options. And BTW, no, the alert doesn't display undefined. It displays the JSON-stringified option. jsfiddle.net/1c4umdhg/1 — JB Nizet
– JB Nizet, Commented Apr 28, 2017 at 6:17
In the fiddle code showing in alert as Object format,but I wanna Only ID and DESCRIPCION for two different variables.like as "alert(subappData.ID);" — Maxi
– Maxi, Commented Apr 28, 2017 at 6:21

Aswathy Balan · Accepted Answer · 2017-04-28 06:20:50Z

2

Try like this

$scope.getSubApplicationDetails = function(subappData) {
  var object = JSON.parse(subappData)
  console.log(object.ID);
};

answered Apr 28, 2017 at 6:20

Aswathy Balan

5041 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get a variable from Object as ng-model using angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related