0

I have a list of objects with 2 attributes: label and description. On html I cycle on this list:

<select class="form-control" 
     ng-options="fid.label for fid in myFidList" 
     ng-model="fidSelected" 
     ng-change="setFidDescription()"/>

What I'm trying to do is calling a function (setFidDescription) to get the object I have selected on option tag. So I can change the respective desciption in another div. That's seems not working: ng-model seems not updating.The function:

 $scope.setFidDescription = function () {
    console.log($scope.fidSelected);
 }

This code print an empty object. What am i missing? Another way to go could be get the $index of my choice.

More info: JSON + console

Update: I have found my problem. See here for the explanation:

AngularJS ngModel doesn't work inside a ui-bootstrap tabset

That was my problem.

Community
  • 1
  • 1
Massimo
  • 205
  • 1
  • 3
  • 10

1 Answers1

1

// Code goes here

angular
  .module('myApp', [])

.controller('testController', ['$scope',
  function($scope) {

    $scope.myFidList = [{
      label: 'label1',
    }, {
      label: 'label2',
    }]

    $scope.setFidDescription = function() {
      alert($scope.fidSelected.label);
    }

  }
])
<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">



  <select class="form-control" ng-options="fid.label for fid in myFidList" ng-model="fidSelected" ng-change="setFidDescription()"></select>

</body>

</html>

Hope this will help you.

Nikhil Mohanan
  • 1,260
  • 1
  • 12
  • 23