2014-12-02 26 views
0

我试图选择土地,所以我可以显示它像{{ selectCenter.land }}但它的空。 有人可以看到有什么问题吗?Angularjs - 获取值显示从一个html选择

这里是一个工作plunker

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

和代码

<!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"} 
    ]; 
}]); 

回答

2

由于您使用的多选模型selectCenter是一个数组不是一个对象,所以你不能表现出它作为

{{selectCenter.land }} 

但你可以创建repe之三样:

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

请看演示这里http://plnkr.co/edit/CXk6ag3XK85JSoWKJYcM?p=preview