javascript - Angularjs 选择组和初始值

Question

我有一个包含 SELECT 元素的表单。我通过从数据库返回数据的函数将可能的值加载到 Controller 中。我想按组名称对选项进行分组。

我有正确加载的选项列表，显示分组。我的问题是初始值没有显示 - 这是基于数据模型的。它显示为空白。如果我选择列表中的任何选项，它就会正确显示。

我按照此解决方案 Populate a Dropdown list by grouping using AngularJs 中的示例进行操作

从我见过的各种其他示例来看，这应该可行......我猜这是我不小心忽略的一些小事情。

这会加载下拉列表的可能值:

    $http.get("api/getIndustry").success(function(data){
        $rootScope.industryData = [];
        $.each(data, function (i, data) {
            $rootScope.industryData.push({
                group: data.group,
                id: data.id, 
                text:  data.text
            });
        });                      
    });

现在，我尝试最初设置一个选定的值(最终它将通过读取记录来设置):

    $scope.example3model = {group: 'Energy and Natural Resources', id: '25', text: 'Utilities'};

这是我观点的一部分。

<td colspan="4" ng-hide="editableForm.$visible">
    <select ng-model="example3model" class="form-control input-md" ng-options="industry.text group by industry.group for industry in industryData" >
    </select></br>
    {{example3model}}    <- did this to see what was chosen
</td>

我不知道还有什么可以尝试让它工作...我现在看到的唯一问题是列表没有显示 example3model 中最初的“默认”值(因此列表显示为空白)。如果我在列表中选择一个值，它将正确显示。

如有任何建议，我们将不胜感激。

Answer 1

问题是您尝试将初始值设置为对象文字，尽管它可能看起来与选择选项中的值相同，但事实并非如此。

发生这种情况是因为 Javascript 和 AngularJS 都如何设置初始对象值(请注意，如果选项是基元数组，则不会发生这种情况，例如作为数字和字符串): {} 和 {} 从人类的 Angular 来看是一样的，但它们在 JS 中显然不一样，请尝试在浏览器中执行此操作控制台:

{} == {}
// this will be false
{ a: 1 } == { a: 1 }
// this will be false as well

现在，Angular 在幕后所做的是检查 ngModel 是否与 ngOptions 内的任何引用匹配，这就是为什么我们需要设置初始值具体从选项数组中引用。

在您的示例中，初始化必须与您提供的特定情况类似(请注意，我将对 id 进行硬编码，以匹配您帖子的需求，但您可以更改它以匹配您需要的任何内容)

const defaultId = 25;
$scope.example3model = $rootScope.industryData.find(data => +data.id === defaultId)

现在 ngModel 值指向我们想要的引用数组对象。

* Take a look at the official documentation about complex models for ngOptions

[请注意，如果 ngOptions 数组中没有一个对象具有该默认 ID，则此操作将不起作用，因为它不会与其中任何对象匹配]