Question

我有以下格式的对象。如何在下拉列表中显示所有ProjectID，用户可以选择任何一个值？请举个例子。

[
  {
    "ProjectManagerID": 4,
    "ProjectID": 4,
    "ResourceID": 4,
    "Deleted": false
  },
  {
    "ProjectManagerID": 5,
    "ProjectID": 8,
    "ResourceID": 5,
    "Deleted": false
  },
  {
    "ProjectManagerID": 6,
    "ProjectID": 9,
    "ResourceID": 6,
    "Deleted": false
  },

Answer 1

angular.module("myApp", [])
  .controller("myController", ['$scope',
    function($scope) {
      $scope.options = [{
        id: 1,
        name: "Value to show user"
      }, {
        id: 2,
        name: "some other value"
      }];

      $scope.optionValue = '';
    }
  ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myController">
    <select ng-model="optionValue" ng-options="opt.id as opt.name for opt in options">
      <option value="">Please select a value</option>
    </select>
  </div>

</div>

Answer 2

您可以使用Bootstrap下拉菜单

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <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><a href="#">ProjectManagerID</a></li>
      <li><a href="#">ProjectID</a></li>
      <li><a href="#">ResourceID</a></li>
    </ul>
  </div>
</div>
</body>
</html>

来源：http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Answer 3

您也可以使用ng-repeat

<select ng-model="selected"
        class="form-control">
    <option value={{project.ProjectID}} ng-repeat="project  in YOUR_PROJECT_LIST">
        {{project.ProjectID}}
    </option>
</select>

Answer 4

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl" ng-init="ctrl.setProject(8)">
    <select ng-options="project.ProjectID as project.ProjectID for project in ctrl.projects" ng-model="ctrl.projectID">
    </select>
  </div>
</div>

angular
    .module('demo', [])
    .controller('DefaultController', DefaultController);

function DefaultController() {
    var vm = this;
    vm.projects = 'Your data goes here!';
    vm.setProject = setProject;

    function setProject(projectID) {
      vm.projectID = projectID;
    }
}

check this jsfiddle ng-options用于为<option>生成<select>标签，它应与ng-model指令一起使用，如上所示，例如：用jsfiddle工作，例如

在ng-options中使用as子句的原因是我们使用projectID设置选定的<option>并以这种方式编写它将根据属性设置选定的<option>在as子句中指定。

ng-init指令用于对作用于该特定DOM区域的适当控制器进行任何初始化，以便在给定示例中显示它，我们使用ng-init指令中调用的函数设置所选选项，但更直接在控制器中执行此操作而不是使用ng-init指令

更合适

尝试阅读此style guide from John Papa这太棒了。

如何在AngularJS中使用ng-options和ng-init

4 个答案: