CODEWITHSUNDEEP
javascriptangularjs
sij
sij

Reputation: 123

Angularjs - get the value to show from a html select

I'm trying to select the Land so I can show it like {{ selectCenter.land }} but its empty. Can someone see what's wrong?

Here is a working plunker

http://plnkr.co/edit/Q8jhdJltlh14oBBLeHJ9?p=preview

and code

    <!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>ngOption demo</h1>
    <div ng-controller="SelectCtrl">
    Search: <input ng-model="searchText" type="text">
    <select
      ng-model="selectCenter"
      ng-options="center.land for center in centre | filter:searchText"
      multiple class="form-control input-lg">
    </select>
    You have chosen:
    {{ selectCenter }}
    </div>
  </body>

</html>


    // Code goes here
angular.module("myApp", []);

angular.module("myApp").controller("SelectCtrl", ["$scope", function ($scope) {
  $scope.centre = [
    {"id":"122","shopID":"200","land":"denmark"},
    {"id":"123","shopID":"201","land":"france"},
    {"id":"124","shopID":"202","land":"italy"}
  ];
}]);

Upvotes: 0

Views: 87

Answers (2)

Simon
Simon

Reputation: 26

remove multiselect

<select ng-model="selectCenter" 
      ng-options="center.land for center in centre | filter:searchText"
   class="form-control input-lg">

for working code check here

http://plnkr.co/edit/NUp6OuFty4lbAd4mwn6D?p=preview

Upvotes: 1

sylwester
sylwester

Reputation: 16498

Because are you using multiselect your model selectCenter is an array not a object so you can't show it as 

{{selectCenter.land }}

but you can create repeter like :

<span ng-repeat="center in selectCenter">{{center.land}}</span>

Please see working demo here http://plnkr.co/edit/CXk6ag3XK85JSoWKJYcM?p=preview

Upvotes: 2

Related Questions