Question

我有一两天的问题试图让我的角度模型使用选择元素。

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

我尝试了几种方法，使用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值。

Answer 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];

Answer 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>

角度模型并选择不起作用

2 个答案: