Question

在我的项目中，我希望使用AngularJS填充select选项，但它不适用于选项标签，它可以正常工作于ul标签。

控制器代码

curl -L -o "sub.jpg" "https://icdn.lenta.ru/images/2016/11/12/13/20161112133708253/pic_b3e542f41dea3569d80375712d111d6d.jpg"

视野中的代码

$scope.courses = ["Maths","Science","History","English","IT"];

预览输出

Answer 1

我认为它不起作用，因为你在控制器方面犯了一些错误。

无论如何，这是一个Working Plunker，可以重现你的情况。

<强> JS：

angular.module("myApp", []);

//Pattern to avoid minification problems
angular.module("myApp").controller("MyController", MyController);

MyController.$inject = []; //Your dependencies between "" go here

function MyController(){ //Your dependencies go here

  var vm = this;

  vm.courses = ["Maths","Science","History","English","IT"];

}

<强> HTML

<html ng-app="myApp">
  . . .
  <body ng-controller="MyController as myCtrl">
    <select >
      <option ng-repeat="course in myCtrl.courses" value="course">{{course}}</option>
    </select>
  </body>
</html>

这是输出

我正在使用controllerAs语法。您可以深入研究here语法。

希望我一直很有帮助。

Answer 2

此示例显示您可以使用2方式选择 ngRepeat 和 ngOptions

＆＃13;

var app = angular.module("app", []);

app.controller("ctrl", function($scope){

  $scope.courses = ["Maths","Science","History","English","IT"];
  
})

＆＃13;

<div ng-app="app" ng-controller="ctrl">

  <h1>with ng-option</h1>
   <select ng-model="test1" ng-options="course for course in courses"  class="chosen-select">
  </select>
  {{test1}}
  
    <h1>with ng-repeat</h1>
   <select ng-model="test2" class="chosen-select">
     <option ng-repeat="course in courses" ng-value="course">
       {{course}}
     </option>
  </select>
  {{test2}}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</div>

＆＃13;

ng-repeat不适用于选项

2 个答案: