角度模型并选择不起作用答案

【问题标题】：Angular model and select not working角度模型并选择不起作用
【发布时间】：2016-01-09 00:12:55
【问题描述】：

一两天来我一直在尝试让一个选择元素与我的角度模型一起工作。

我有一份驾驶日志，其中一个字段是卡车。该值应该是从 API 接收和发送到 API 的卡车 ID。

我尝试了几种方法，使用ng-repeat to generate options，以及使用ng-options。我在使用 ng-repeat 方法时遇到的问题是我无法设置选定的项目，即使有很多修补和做不应该做的事情，以及不好的做法。

我认为第二种方法是正确的，它使用的是 ng-options。

<select ng-model="timeLog.truck" convert-to-number
  ng-options="truck.description for truck in trucks track by truck.id">
  <option value="">Choose Truck</option>
</select>

.controller('EditTimeLogCtrl', function($scope, $stateParams, $location, timeLog, LogEntry, localStorageService) {
  // edit an individual time log
  $scope.timeLog = timeLog;
  $scope.trucks = localStorageService.get('trucks');

  $scope.saveTimeLog = function() {
    LogEntry.update($scope.timeLog, function(data) {
      $location.path('/tab/logs/edit');
    });
  }
})

我的timeLog 模型中的所有其他内容都有效，并且模型中的值是整数。

由于某种原因，即使docs 指定使用它来设置默认值，我也无法正确设置初始值。

我在使用 ng-options 时遇到的另一个问题是，当我提交表单时，它使用卡车对象 {"description": "big red", "id": 7, ... } 而不是选项的值，即 7。 API 需要 id，所以这不起作用。

我找到了 3 篇关于此的 stackoverflow 文章，它们都给出了各种答案，但并不能真正解决问题。

这似乎是一个非常常见的用例，也许我想错了？我只有一个模型，它有一个下拉/选择字段，如果模型已经存在（即编辑表单），我需要它来填充所选值，并在模型保存中传递 id 值。

【问题讨论】：

标签： angularjs

【解决方案1】：

你的 ngOptions 语法有点不对 - 它是 value as text for obj in arr - 所以把你的改成：

ng-options="truck.id as truck.description for truck in trucks track by truck.id"

然后将您的模型设置为您要选择的对象的id：

$scope.timeLog.truck = 7; //truck id 7 selected.

如果你想要整个对象作为值：

ng-options="truck as truck.description for truck in trucks track by truck.id"

并设置整个对象：

$scope.timeLog.truck = $scope.trucks[0];

【讨论】：

谢谢，将truck.id as 放在将发送值从对象更改为id 之前。在控制器加载时，当我 console.log($scope.timeLog.truck) 我得到一个 int 7 但它确实在具有值 =“7”的选项上放置了一个选定的选项。我也尝试将 $scope.timeLog.truck 设置为字符串，但仍然具有相同的行为。

【解决方案2】：

确保您的 timeLog.truck IS (===) 是卡车数组中的实际对象（相同的引用对象）

angular
  .module('app', [])
  .controller('myController', myController);

function myController($scope) {

  $scope.trucks = [{
    "description": "big red",
    "id": 7
  }, {
    "description": "big yellow",
    "id": 6
  }];

  $scope.timeLog = {truck: $scope.trucks[0]};
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myController">
    <select ng-model="timeLog.truck" ng-options="truck.description for truck in trucks">
      <option value="">Choose Truck</option>
    </select>
  </div>
</div>

【讨论】：