Angular.js-从html选择中获取要显示的值

Question

我正在尝试选择土地，因此我可以像{{ selectCenter.land }}一样显示它，但是它是空的。 有人知道出什么事了吗？

这是一个工作的家伙

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

Answer 1

因为您正在使用多选模型， selectCenter是一个数组而不是对象，因此您无法将其显示为

{{selectCenter.land }}

但是您可以像这样创建重复器：

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

请在此处查看工作演示http://plnkr.co/edit/CXk6ag3XK85JSoWKJYcM?p=preview

Answer 2

删除多选

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

在这里查看工作代码

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

Angular.js-从html选择中获取要显示的值

问题描述

2 个解决方案

解决方案1
2 2014-12-02 11:56:39

解决方案2
1 已采纳 2014-12-02 12:41:02

Angular.js-从html选择中获取要显示的值

问题描述

2 个解决方案

解决方案1 2 2014-12-02 11:56:39

解决方案2 1 已采纳 2014-12-02 12:41:02

解决方案1
2 2014-12-02 11:56:39

解决方案2
1 已采纳 2014-12-02 12:41:02