将模型中的预选值绑定到角度下拉列表中答案

【问题标题】：Binding preselected value from model into angular drop down list将模型中的预选值绑定到角度下拉列表中
【发布时间】：2015-09-12 03:34:23
【问题描述】：

我查看了 AngularJS 文档-https://docs.angularjs.org/api/ng/directive/ngOptions 但无法弄清楚如何根据模型定义在下拉列表中预选一个值。

请看一下这个 Plunker，HTML 视图应该在“单位下拉列表”中显示“克”作为选定值，但由于某种原因，它显示为选定的空白值。请建议我在这里做错了什么。

http://plnkr.co/edit/5gO0bjXOx2mlPXgo7m4u?p=preview

'use strict';
var app = angular.module('myTestApp', []);
app.controller('myTestCtrl', myTestCtrl);
function myTestCtrl() {
 var vm = this;
 vm.message = "test"

vm.data = {
  "units": [{
  "id": 0,
  "name": "Gram"
  }, {
  "id": 1,
  "name": "Litre"
  }, {
  "id": 2,
  "name": "Pound"
  }]
 };


vm.currentIngredient = {
"ingredientId": 1,
"ingredientName": "Salt",
"description": "Sea Salt.",
"unit": {
  "id": 0,
  "name": "Gram"
 },
  "status": true
};

vm.selectedUnit = vm.currentIngredient;
}

以下是我的观点：

<!DOCTYPE html>
<html>
<head>
<script   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
 <link rel="stylesheet" href="style.css">
 <script src="app.js"></script>
 </head>

 <body ng-app='myTestApp' ng-controller='myTestCtrl as vm'>
   {{vm.message}}
 <div>...</div>

  <div class="form-group">
  <label class="col-md-2 control-label" for="inputUnit">Unit:</label>
  <div class="col-md-2">
  <select class="form-control" ng-model="selectedUnit" ng-options="u.id as u.name for u in vm.data.units"></select>
   </div>
  </div>

 </body>

</html>

【问题讨论】：

selectedUnit 在视图中为 null，因为它可以作为 vm.selectedUnit 使用，它具有对象作为值，但试图将 unit.id 绑定到该对象值。所以如果你使用vm.selectedUnit.unit.id 那么它应该可以工作。
我尝试在我的视图中使用它 - vm.selectedUnit.unit.id。但它仍然默认为在 Unit DDL 中选择的空白。

标签： angularjs

【解决方案1】：

正如 cmets 中所建议的，您不受vm.selectedUnit 财产的约束，您被$scope.selectedUnit 绑定，这不是一回事。此外，您没有预先选择与下拉层次结构正确匹配的值。为了使这项工作有效，应该进行两项更改。

在 HTML 中，更改为 vm.selectedUnit:

  <select class="form-control" ng-model="vm.selectedUnit" ng-options="u.id as u.name for u in vm.data.units"></select>

在 JavaScript 中，更改预选：

 vm.selectedUnit =  vm.currentIngredient.unit.id;

分叉的 Plunker：http://plnkr.co/edit/i5EyTvekhJ75yj903qrB?p=preview

【讨论】：

【解决方案2】：

我做了一些改动希望你喜欢我的工作是我的 plunker 代码

我的 HTML 代码在这里...

<select>
       <option ng-repeat="units in vm.units">
        {{units.name}}
       </option>

</select>

和 app.js 的变化就像...

'use strict';

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

app.controller('myTestCtrl',myTestCtrl);

function myTestCtrl(){
  var vm =this;
  vm.message="test"


        vm.data = {
            "units": [
                { "id": 0, "name": "Gram" },
                { "id": 1, "name": "Litre" },
                { "id": 2, "name": "Pound" }
            ]
        };


        vm.currentIngredient = {
            "ingredientId": 1,
            "ingredientName": "Salt",
            "description": "Sea Salt.",
            "unit": { "id": 0, "name": "Gram" },
            "status": true
        };

        // vm.selectedUnit =  vm.currentIngredient;
         vm.units= vm.data.units;


}

http://plnkr.co/edit/E7JchKQraWlqIjqIBqZs?p=preview

【讨论】：

虽然这个可能有效，但您的代码似乎完全省略了ng-model，并且恰好有一个“预选”值，因为它是列表中的第一个。您还删除了ng-options 并改用ng-repeat，它不适合在<select> 元素中使用。总的来说，这个问题的答案很糟糕。
是的，毫无疑问，但正如我已经说过的“我已经完成了一些更改”并且根据#user3400087 问题，他希望将克显示为选定值，我也做了同样的事情。我认为您没有任何理由不赞成我的回答。
我想使用 ng-options：stackoverflow.com/questions/24483903/…
另外，如果我使用 -track by u.id，它可以按需要工作。但我试图弄清楚在不使用它的情况下让它工作。有输入吗？
@PardeepJain 实际上，您没有将任何内容显示为“选定值”，因为您没有 ng-model，所以此选择框从不绑定到任何内容.如果您要添加ng-model，然后在控制器中记录该模型变量的值，您会发现它是undefined。这不是可行的解决方案。