Question

我似乎无法将我选择的值从我的下拉列表中绑定到我的模型。

我有这样的下拉：

<tr>
    <th>Link to Employee</th>
    <td>
        <select id="employeeSelect" ng-controller="employeesController"
                ng-init="getEmployees(null, null)">
            <option ng-repeat="employee in data.employees"
                    value={{employee.id}} ng-selected="{{employee.id}} == @ViewBag.empId"
                    ng-model="data.employeeCase.employeeId">
                {{employee.firstName}} {{employee.lastName}}
            </option>
        </select>
    </td>
</tr>

getEmployees（null，null）将$ scope.data.employees属性设置为：具有所需属性的Employees数组。

我的下拉项目显示效果很好。我可以使用来自ASP.Net MVC的ng-selected和我的ViewBag值设置默认选择。

我有一个像这样的提交按钮：

保存

角度控制器功能如下所示：

$scope.addCase = function (employeeCase) {

$http.post(caseUrl, employeeCase)
    .then(function (response) {
        // Test front end exception message;
        // throw "test exception";
    })
    .catch(function (error) {
        $scope.data.caseInsertError = error;
    });
}

我的所有非下拉值都绑定到post方法中的employeeCase。

这是一个绑定的：

<tr>
    <th>Intitial Consult Date</th>
    <td>
        <input type="date" ng-model="data.employeeCase.initialConsultDate" />
    </td>
</tr>

如何将选择的选项（通常是id）传递给我的角度函数？

Answer 1

只需使用此ng-options中的runnable fiddle demo即可。您选择的值会在ng-model元素中绑定到select。在此示例中，它将在selectedEmployeId上绑定。

=＆GT; ng-options="employe.id as (employe.firstName + ' ' + employe.lastName) for employe in data.employees"

视图

<div ng-controller="MyCtrl">
  <select ng-model="selectedEmployeId" 
          ng-options="employe.id as (employe.firstName + ' ' + employe.lastName) for employe in data.employees"></select>
  <br /><br />
  SelectedId: {{ selectedEmployeId }}
</div>

AngularJS应用程序

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.data = {
    employees: [{
      id: 1,
      firstName: 'black',
      lastName: 'dark'
    }, {
      id: 2,
      firstName: 'white',
      lastName: 'light'
    }, {
      id: 3,
      firstName: 'red',
      lastName: 'dark'
    }, {
      id: 4,
      firstName: 'blue',
      lastName: 'dark'
    }, {
      id: 5,
      firstName: 'yellow',
      lastName: 'light'
    }]
  };

  $scope.selectedEmployeId = $scope.data.employees[0].id;
});

Answer 2

您应该使用ng-options与ng-model结合使用。

我做了一个简单的例子来帮助你：https://codepen.io/miguelbaldi/pen/ZePgzx

控制器：

function employeesController($scope) {
    $scope.data = { 'employees': [] };
    // Selecting employee by it's ID, bound using ng-model
    $scope.selectedEmployee = { id: 2 };
    $scope.getEmployees = function(a, b) {
        $scope.data.employees = [
            { id: 1, name: "John Doe" },
            { id: 2, name: "Jane Doe" }
        ];
    };
    $scope.addCase = function() {
        console.log('Employee', $scope.selectedEmployee);
        alert($scope.selectedEmployee.name);
    }

}

查看：

<html ng-app>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"
  />
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset=utf-8 />
  <title>Angular JS Demo</title>
</head>

<body>
  <h2>ng-options example</h2>
  <form class="form-horizontal" ng-controller="employeesController" ng-init="getEmployees(null, null)">
    <table class="table">
      <tbody>
        <tr>
          <th>Link to Employee</th>
          <td>
            <select id="employeeSelect" ng-options="employee as employee.name for employee in data.employees track by employee.id"
              ng-model="selectedEmployee">
            </select>
          </td>
        </tr>
      </tbody>
    </table>
    <button ng-click="addCase()" class="btn btn-primary" id="btn_submit_add_case_modal" type="button">
      <i class="glyphicon glyphicon-save-file"></i> SAVE
    </button>
  </form>
</body>

</html>

Answer 3

在select标签中使用ng-model指令而不是选项标签。

如何将我的Selected选项绑定到AngularJS中的模型？

3 个答案:

视图

AngularJS应用程序