Angularjs选择组和初始值

我有一个包含SELECT元素的表单。我从一个返回数据库数据的函数中加载控制器中的可能值。我想按组名称将选项分组。Angularjs选择组和初始值

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

我跟着从这个解决方案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“默认”值（所以列表显示为空白）。如果我在列表中选择一个值，它会正确显示。

任何建议将不胜感激。

来源

2017-10-11 user3861284

是否'$ rootScope.industryData ''array包含你设置为'$ scope.example3model'初始的确切对象？我要么设置循环数据数组的初始值，并指向对象引用 – GMaiolo

是的，据我所知可以确切地在那里。起初，我确实注意到id字段的格式不一样，但解决了这个问题。屏幕显示当屏幕显示不在下拉菜单中时显示的值。我从列表中选择了完全相同的选项，并且显示的完全相同。 – user3861284

请试试这个：'$ scope.example3model = $ rootScope.industryData.filter（function（data）{return + data.id === 25}）[0]'告诉我它是否有效，我们需要使用数组中相同的引用对象的初始值 – GMaiolo

问题是，您正在尝试将初始值设置为对象字面值，即使它看起来与选择选项内部的值不相同。

这是因为如何的Javascript和AngularJS都工作到设定的初始目标价值（注意，这是不会发生的，如果选项是原语，如数字和字符串数组）：{}和{}从人性的角度看是相同的，但他们显然不一样的JS，尝试在浏览器控制台这样做：

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

现在，角做幕后是检查是否ngModel匹配任何参考文献在ngOptions之内，这就是为什么我们需要设置从options数组引用的初始值，特别是。

初始化，在你的榜样，必须是这样的你提供的特定情况下（注意，我会硬编码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，因为它不会与任何人，这将不起作用]

来源

2017-10-11 19:39:04 GMaiolo

非常感谢你！我想我可以按照您的建议与您提供的内容一起进行查找和分配。非常令人沮丧 - 让我疯狂:) – user3861284

Angularjs选择组和初始值

回答

相关问题