选择下拉AngularJs的特定选项答案

【问题标题】：select a paticular option of a dropdown AngulaJs选择下拉AngularJs的特定选项
【发布时间】：2014-04-25 18:47:52
【问题描述】：

我正在使用 AngularJs 和 ASP.NET MVC4。首先，我使用剃刀语法生成一个下拉列表。

@Html.DropDownList("packageName", (IEnumerable<SelectListItem>)ViewBag.packageName, "No Data Available", new { ng_model = "subForm.packageName" })

然后我像这样重新填充我的下拉列表：

$('#packageName').empty();
$('#packageName').append($('<option />').val('').text('Select Package'));
$('#packageName').append($('<option />').val(1).text('Package 1'));

现在我正在尝试在我的角度控制器中设置一个选项，如下所示：

$scope.subForm.packageName = '1';

但这会产生一个无效的选项。错误是这样的：

<select ng-model="subForm.packageName" name="packageName" id="packageName" class="ng-pristine ng-valid">
    <option value="? string:1 ?"></option>
    <option value="">Select Package</option>
    <option value="1">Package 1</option>
</select>

为什么会生成第一个选项？有什么解决办法吗？

【问题讨论】：

“Angular 方式”是使用 ngOptions。
那就继续用吧。
但是这样有什么问题呢？我就是想不通。
因为 Angular 还不能读懂你的想法。为 4.2 版计划了一项新服务，它将能够阅读您的想法并以您能想到的任何方式处理 DOM（如果您足够专注的话）。如果您使用的是早期版本，则需要遵循一些约定，以便 Angular 知道发生了什么。
如果我不重新填充下拉菜单，可以通过为模型设置特定值来选择一个选项。但是重新填充然后设置模型值的问题。这可能是什么原因？

标签： jquery angularjs asp.net-mvc-4

【解决方案1】：

由于 select 指令的实现方式，它需要知道可用的选项值才能将关联模型的值映射到选项。
您可以使用 ngOptions 实现您想要的。这很容易：

<!-- In the VIEW: -->
<select id="packageName" ng-model="subForm.packageName"
        ng-options="packageName for packageName in packageNames">
    <option value="">Select Package</option>
</select>

/* In the CONTROLLER: */
$scope.packageNames = [...];

$scope.subForm = {
    packageName: $scope.packageNames[0]
};

另请参阅此short demo。

【讨论】：