【问题标题】:Angular setting a selected attribute with ng-optionsAngular 使用 ng-options 设置选定属性
【发布时间】:2016-04-12 18:41:17
【问题描述】:

我基于 JSON 调用填充选择的值和显示名称。在同一个调用中,我从嵌套数组中提取默认帐户值(如果存在)。 所以我有一个保存该默认帐户值的范围,并且选择正在填充,但是对于我的生活,我无法弄清楚如何让选择属性应用于数组中具有值的对象对应于默认值。

本质上,如果数组中存在默认帐户 ID,我只想将“已选择”应用于选项。

此外,我无法更改 select 的 ng-model,因为它与表单集合功能相关联。

另外,我对使用 ng-repeat 与 ng-options 持开放态度,只是无法通过 repeat 弄清楚,所以我转向了选项范例。

任何帮助将不胜感激! HTML:

<select class="form-control" id="authQAccount" name="authQAccount" ng-model="authFields.accountID" ng-init ng-options="item as item.name for item in accounts track by item.ID" ng-selected="$scope.defaultAcct" required>
    </select>

在我的控制器中:

$http.get('/api/assessment/authorize').success(function(data, status, headers, config) {
    $scope.content = data.data;
    //Pop the defaults and user options
    $scope.languages = [];
    angular.forEach(data.data.languages, function(value, key) {
          $scope.languages.push(value);
    });
    $scope.accounts = [];
    angular.forEach(data.data.accounts, function(value, key) {
          $scope.accounts.push(value);

    }); 

    $scope.defaultAcct = data.data.defaultAccount;

我得到的数据:

"data": {
    "defaultAccount": "6481004",
    "defaultLanguage": "en_us",
    "defaultAddonBody": "Test Email for Default",
    "accounts": [{
        "ID": "6481004",
        "name": " ABC Company, Inc.            "
    }, {
        "ID": "6481619",
        "name": "EDF Company - Personal                "
    }

【问题讨论】:

    标签: angularjs ng-options angularjs-select


    【解决方案1】:

    ng-selected 仅适用于 option 元素,不适用于 select 元素本身。我不认为你可以在这里用ng-options 实现你想要的,如果ng-model 没有设置为匹配的项目,那么select 无法选择该项目。

    除非你只希望它出现被选中,那么你可以添加&lt;option value="" ng-if="defaultAccount"&gt;{{defaultAccountName}}&lt;/option&gt;。但是,您将有 2 个具有相同值的项目,您可以从选项列表中删除默认帐户,也可以保留这两个项目,但其中一个以 (Default) 为前缀。第二个选项允许用户在以后选择默认选项时仍然选择默认选项,以防默认更改。这也意味着您的表单已选择默认值,而无需更改外部模型。

    【讨论】:

    • 谢谢斯科特!我留在了选择上的 ng-options 中,只是为了说明我想要做什么,但这正是我正在寻找的确认。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-04
    • 2012-08-21
    • 2014-04-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多