Question

我写了依赖的组合框并遇到了这样的问题 - 如何设置初始值？例如，我有一个用于添加新记录的表单：

Controller.js：

...
$http({
     url: '/api/address/fill',
     method: 'POST'
}).success(function (data) {
     $scope.itemsForLevelOne = data
}).error(function(errorData) {
   ...
});

$scope.updateOne = function() {
    $http({
         url: '/api/address/change',
         method: "POST",
         data: {'tobId' : $scope.itemOne.id}
    }).success(function (data) {
         $scope.itemsForLevelTwo = data;
    }).error(function(errorData) {
       ...
    });
};
...

View.html：

...
<label>Level One</label>
<select class="form-control m-b"
        data-role="listview"
        data-inset="true"
        ng-options="someValue as someValue.tobName for someValue in itemsForLevelOne"
        ng-model="itemOne"
        x-ng-change="updateOne(itemOne)">
</select>

<label>Level Two</label>
<select class="form-control m-b"
        data-role="listview"
        data-inset="true"
        ng-options="someValue as someValue.tobName for someValue in itemsForLevelTwo"
        ng-model="itemTwo"
        x-ng-change="updateTwo(itemTwo)">
</select>
...

从控制器我可以调用服务器端（在我的情况下为Play Framework），然后从数据库中提取数据并保存。

在编辑和删除记录的形式中，我应该为所有选择元素设置初始值。

我该怎么办？我非常感谢这些信息。谢谢大家。

Answer 1

AngularJS使用双向绑定。在进行选择时，所选选项存储在ng-model属性中，并且还从ng-model属性中读取该选项以显示正确的选择。

因此，您从选项数组中选择要选择的元素，并初始化与选择的ng-model对应的变量。例如，要选择第一个元素，请执行

$scope.itemOne = $scope.itemsForLevelOne[0];

Answer 2

您应该使用ng-repeat而不是ng-options

<select>
        <option ng-repeat="someValue as someValue.tobName for someValue in itemsForLevelTwo"  ng-selected="expression_to_be_evaluated"
</select>

ng-repeat with option标签，为您提供比ng-options更多的控制。

Answer 3

JB说过，但请记住，传递给ng-model的对象与列表值本身之间的值匹配是至关重要的;在你的情况下：

$scope.itemOne = someValue;
$scope.itemTwo = someValue2;

someValue和someValue2需要与相应的选项值匹配，否则你最终会得到可怕的空第一个框。

另一种解决方案是添加默认选择器选项，指示用户选择一个选项：

...
<label>Level One</label>
<select class="form-control m-b"
        data-role="listview"
        data-inset="true"
        ng-options="someValue as someValue.tobName for someValue in itemsForLevelOne"
        ng-model="itemOne"
        x-ng-change="updateOne(itemOne)">
    <option>Please Select An Item</option>
</select>
...

这样，填写表单的人永远不会非自愿地选择一个选项。此默认选项（因为它没有值）将在选择时消失。

如何在AngularJS中为select元素设置初始值？

3 个答案: