Question

我尝试使用bootstrap和angularjs创建一个用于选择语言的下拉框。

默认情况下，下拉框中的选项应填充英文。如果我选择其他语言，则应使用相应的语言填充下拉框。

我怎样才能做到这一点？任何人都可以帮我解决这个问题...

我的js代码：

angular.module('Sample', [ 'ngAnimate', 'ui.bootstrap' ]);
angular.module('Sample', []).controller('Home', function($scope) {


    $scope.languages= [ 'English', 'Telugu', 'Hindi', 'Tamil' ];

});

我的HTML代码：

    <div class="dropdown">

            <button class="btn btn-default dropdown-toggle" type="button"
                id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">

                Language <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                <li ng-repeat="a in languages"><a href="#">{{a}}</a></li>

            </ul>
        </div>

Answer 1

DEMO：FIDDLE
HTML：

results = PartReference.objects.all()
for result in results:    
    print(result.name, result.code, results.part_set.count())

JS：

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button"
            id="dropdownMenu1" data-toggle="dropdown"
                aria-expanded="true">
        <span ng-bind="selected.subject"></span>
        <span class="caret"></span>
     </button>
       <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li ng-repeat="subject in subjects" ng-  click="selected.subject=subject"><a href="#">{{subject}}</a></li>
      </ul>
   </div>

Answer 2

您需要在项目中指定ng-app和ng-controller。您还需要确保在项目中添加了jquery，bootstrap和angular。

angular.module('SmartOCR', ['ngAnimate', 'ui.bootstrap']);
angular.module('SmartOCR', []).controller('HomeController', function($scope) {


  $scope.subjects = ['English', 'Telugu', 'Hindi', 'Tamil'];

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="SmartOCR">

  <div class="dropdown" ng-controller="HomeController">

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

      Subject <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li ng-repeat="a in subjects"><a href="#">{{a}}</a>
      </li>
    </ul>

  </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

如何使用bootstrap和angularjs创建一个下拉框

2 个答案: