AngularJS ng-repeatのブートストラッププルダウン

Question

以下のようなオブジェクトがあります。これをドロップダウンとして表示する必要があります。http://jsfiddle.net/ywkLt/210/

ドロップダウンが表示されない：私は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' 
    }]; 
}]); 

これを試みたが、

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> 

を働いていません。私はこれに新しいです誰も私を助けることができます。

編集：

は、私が選択した値を表示すると、ドロップダウンのためのキャレットのアイコンが続きます。 このように：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> 

がUPDATE：を

このフィドルには、ドロップダウンを作成するオプションと、HTMLを使用し、選択を使用するオプションがあります。

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

Answer 2

は、角度が、私はそれが

{{testValという}}のように表示されるHTMLに$ scope.testValを=コントローラと場所に1 {{testValという}}置く場合ので、正しくセットアップされていると思いませんか

Answer 3

これをチェックしてください。今働いている。

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

Link here

Answer 4

これを試してみてください。

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>

Answer 5

あなたのセットアップはどこか間違っています。私はいくつかの参考文献を試していましたが、コンソールエラーはブートストラップ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/