Question

我有一个如下对象。我必须将其显示为下拉列表。我尝试了这个但没有工作

HTML

    <div ng-app="app">
  <div ng-controller="MyCntrl">
    <ul class="unstyled">
      <li class="dropdown" ng-repeat="p in people">
       {{Slected value}}   <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li>{{p.color}}</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

JS

var app = angular.module('app', []);
app.controller('MyCntrl', ['$scope', function($scope) {

  $scope.people = [{
    id: 1,
    color: 'blue',
    gender: 'male'
  }, {
    id: 2,
    color: 'red',
    gender: 'female'
  }, {
    id: 3,
    color: 'red',
    gender: 'male'
  }];
}]);

小提琴： http://jsfiddle.net/ywkLt/210/

下拉列表未显示。我是新手，任何人都可以帮助我。

修改

我想显示所选值，然后是插入符号下拉列表。像这样：http://jsfiddle.net/qWzTb/3577/

但在这里我需要插入符号图标。当我点击它时，它必须显示选项。

Answer 1

要么你没有正确的链接到angular.min.js或小提琴没有响应：

我创建了一个工作的plunker：https://plnkr.co/edit/9PDpoZN72xeIXCZteeJz?p=preview 代码：

<select ng-model="selectedPeople" ng-options="type.color for type in people">
    <option value="">All People</option>
</select>

<强>更新

这个小提琴包含创建下拉列表的两个选项，使用你的html并使用select：

http://jsfiddle.net/br8bur7o/1/

Answer 2

您的设置在某处出错了。我确实尝试了几个引用，控制台错误一直在bootstrap css上弹出。

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li ng-repeat="p in people">{{p.color}}</li>
      </ul>
    </div>
</div>

这是一个工作小提琴.. http://jsfiddle.net/cec58kkb/

Answer 3

不要认为角度设置正确，因为如果我将$ scope.testVal = 1放入控制器并将{{testVal}}放在HTML上，则显示为{{testVal}}

Answer 4

检查一下。它现在正在工作。

<select>
  <option value = "0" label = "Please Select"></option>
  <option ng-repeat="p in people" value="{{p.color}}">
    {{p.color}}
  </option>
</select>

Link here

Answer 5

试试这个。

var app = angular.module('app', []);
app.controller('MyCntrl', ['$scope', function($scope) {

  $scope.people = [{
    id: 1,
    color: 'blue',
    gender: 'male'
  }, {
    id: 2,
    color: 'red',
    gender: 'female'
  }, {
    id: 3,
    color: 'red',
    gender: 'male'
  }];
}]);

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
<div ng-app="app">
  <div ng-controller="MyCntrl">
   <select ng-model="select" ng-options="value.id as value.color for (key,value) in people "></select>
  </div>
</div>

AngularJS ng-repeat中的Bootstrap下拉列表

5 个答案: