Angularjs - 动态填充一个comboBox(Array())

时间:2016-07-12 20:28:32

标签: javascript angularjs

我希望有人能帮助我弄清楚我的问题。我正在尝试用一些数组数据填充一个comboBox,但我得到一个空的comboBox,就好像它没有返回显示,我知道我已经关闭但可以找到我所缺少的。

提前谢谢



angular.module('demoApp', [])
  .controller('simpleController', ['$scope', function($scope) {
    $scope.employeeCollections = [
      { id:'1',name: 'Dave Jones', title: 'IT Administrator' },
      { id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
      { id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
    ];
    $scope.selectedEmployee = $scope.employeeCollections[0].name;
  }]);

<html ng-app="demoApp">

<head>
  <script src="Scripts/angular.min.js"></script>
</head>

<body>
  <h1> Employee Information </h1>

  <div class="container" ng-controller="simpleController">
    <select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

看来你的angularjs引用是错误的。请检查路径。请参阅下面的CDN片段。

<html ng-app="demoApp">
<body> 
<h1> Employee Information </h1>

<div class="container" ng-controller="simpleController"> 

<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>

 </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>

 angular.module('demoApp', [])
.controller('simpleController',['$scope', function ($scope) {
     $scope.employeeCollections = [
        { id:'1',name: 'Dave Jones', title: 'IT Administrator' },
        { id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
        { id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
     ];            
     $scope.selectedEmployee = $scope.employeeCollections[0].name;
   }
  ]
);   
</script>
</html>