AngularJS：使用指令将选择下拉应用于页面时设置默认选择选项

Question

---

编辑/更新 我为这个问题添加了一个 plunker： http://plnkr.co/edit/mlYKJQc7zQR0dsvDswMo

---

我正在将上一页的数据加载到我的页面控制器中的 $scope.visit 中。我想要一个指令，使用数据库中的选项在页面上构造和加载选择元素。这是我目前所拥有的：

app.directive('popList', ['$http', function($http) {
    'use strict';
    var directive = {
        restrict: 'EA',
        link: link,
        scope: {
            popList: '='
        },
        template: function(elem,attrs) {
            return  '<select '+
                        'ng-model="'+attrs.model+'" '+
                        'ng-options="option.name for option in ddlOpts track by option.id" '+
                        'required '+
                    '></select>';
        }
    };
    return directive;
    function link(scope, elem, attrs, ctrl) {
        var data = {
                sTableName: attrs.tbl
            };
        $http.post('ddl.asmx/populateDDL',data).
        then(function(response) {
            console.log('This is the value I want to set it to '+scope.$parent.visit.data.state_id);
            //ddlOpts loads with no problem
            scope.ddlOpts = response.data.d;
        });

    }
}]);

那么 HTML 看起来像这样：

<div style="width: 5%" class="tableLabel">State</div>
<div
    style="width: 27%;"
    class="tableInput"
    model="visit.data.state_id"
    tbl="tblStates"
    pop-list="states"
>
</div>

基本上，我传递了包含我的下拉选项的表的名称。我还传入了模型，它将告诉选择默认值是什么（如果有的话。）

我可以毫无问题地将数据作为选项加载到选择元素中。我检查了 ng-model 以确保我有正确的值来匹配 ng-value。我已经尝试过 ng-repeat，然后从 ng-options 重新开始，但我一生都无法获得选择选项来将默认值设置为 ng-model 值。

我开始思考它，因为选择在不同的范围内，它的范围比控制器将数据设置为$ scope.visit。有人可以解释为什么这两个作用域不能相互识别，或者只是解释为什么我不能将我的默认值设置为存储在 ng-model 中的值？

这是页面控制器，以供您参考：

app.controller('demographicsFormCtrl', function($rootScope, $scope, $cookies, $http, $window, $route) {
    if (
        typeof $cookies.get('visitTrack') === 'undefined' ||
        typeof $cookies.get('visitInfo') === 'undefined' ||
        typeof $cookies.get('visitData') === 'undefined'
    ){
        window.location.href = "#/";
        return false;   
    }
    $scope.visit = {};
    $scope.visit.track = JSON.parse($cookies.get('visitTrack'));
    $scope.visit.data = JSON.parse($cookies.get('visitData'));
    $scope.visit.info = JSON.parse($cookies.get('visitInfo'));
    $rootScope.preloader = true;
    console.log('controller set');

});

Answer 1

 template: function(elem,attrs) {
            return  '<select '+
                        'ng-model="'+attrs.model+'" '+
                        'ng-options="option.name for option in ddlOpts track by option.id" '+
                        'required '+
                    '></select>';
        }

在上面的模板中你有ddlOpts，我相信它是一个对象数组。当用户选择其中一个名称时，您将在下拉列表中显示 name 并将 option 存储在 ng-model 中。

对于attrs.model，您正在从主 视图model="visit.data.state_id" 传递数据。因此，您只传递了一个 id 来设置默认选项。

如果你想设置一个默认选项，你必须传递一个匹配ddlOpts的对象之一的对象。

另外请注意，如果您尝试将对象传递给model="visit.data.state_id"，我认为您无法通过attrs.model 读取指令内部的对象，因为model="" 拥有string。

很可能，您在指令中添加了一个独立的范围绑定。

 scope: {
            popList: '=',
            model: '='
        },

在 HTML 中

template: function(elem,attrs) {
            return  '<select '+
                        'ng-model="'+model+'" '+
                        'ng-options="option.name for option in ddlOpts track by option.id" '+
                        'required '+
                    '></select>';
        }

Answer 2

首先，感谢Ravi，因为没有他我无法找到答案...

好的，所以这是在指令中执行此操作的简单说明。数据库正在发送一个只有一个键和一个整数值的对象。 Angular，在使用 ng-options 时，正在创建一个具有 k/v 对 id-int、name-string 的对象...正如您在此 plunk 中看到的，当我转换数据库数据（手动）以匹配结果时选定的选项就像一个魅力......

在这里查看：http://plnkr.co/edit/mlYKJQc7zQR0dsvDswMo

基本上在尝试更改创建的指令的值时，只需确保 ng-model 中的数据对象与 ng-options 创建的数据对象匹配...

或者，如果您对所提供的数据有同样的问题，您可以在将 ddlOpts 设置为基于从数据库发送的 int 后写入一些内容，如下所示：

app.directive('popList', ['$http', function($http) {
    'use strict';
    var directive = {
        restrict: 'EA',
        scope: {
            model: '='
        },
        template: function(elem,attrs) {
            return  '<select '+
                        'ng-model="model" '+
                        'ng-options="option.name for option in ddlOpts track by option.id" '+
                        'required '+
                    '></select>';
        },
        link: link
    };
    return directive;
    function link(scope, elem, attrs) {
        var defaultInt;
        if (typeof scope.model === "number"){
            defaultInt = scope.model;
        }else{
            defaultInt = parseInt(scope.model);
        }
        var data = {
                sTableName: attrs.tbl
            };
        $http.post('/emr4/ws/util.asmx/populateDDL',data).
        then(function(response) {
            scope.ddlOpts = response.data.d;
// THIS LINE BELOW HERE SETS THE VALUE POST COMPILE
            angular.forEach(scope.ddlOpts, function (v, i) {
                if (v.id === defaultInt) {
                    scope.model = v;
                }
            });
        });

    }
}]);

根据经验，让您的数据来自 db 匹配 Angular 创建的内容总是更好，但并非总是如此......