Question

我对Angular很新。我在阅读文档时得到的一个印象是你应该避免直接访问DOM，因为Angular应该为你做这件事。换句话说，我应该避免使用jQuery来做事。

我正在试图弄清楚如何将选择框中的值加载到Angular的范围变量中。例如，如果我的HTML模板包含以下代码段：

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

我希望能够在加载页面后在控制器中设置一个看起来像这样的变量：

 $scope.selectvals = [ { value: "1", description: "Option 1" },
                     { value: "2", description: "Option 2" },
                     { value: "3", description: "Option 3" }    
                   ]

我可以使用JQuery来做到这一点，但后来我会触及DOM。我想知道Angular是否提供了一些替代方案来实现这一目标。

我也知道我可以通过Ajax调用发送此信息并使用ng-option加载select，但我想节省额外的Ajax请求的开销，将这些小信息加载到选择框中。 / p>

Answer 1

您可以使用ng-options填充列表，如下所示：

<div ng-app ng-init="options=[{ value: '1', description: 'Option 1' }, { value: '2', description: 'Option 2'}]">
    <select ng-model="selectedOption" ng-options="o.description for o in options"></select>
</div>

您需要设置ng-model以捕获所选项目。

fiddle

Answer 2

<select ng-model="myVal" ng-options="val.description for val in selectvals"></select>

绑定到您创建的scoped proerty selectvals，语法如上所示。 Here's Select

的官方页面

加载值从选择框到角度范围/模型

2 个答案: