gpt4 book ai didi

javascript - Angularjs 选择组和初始值

转载 作者:行者123 更新时间:2023-12-03 03:17:51 25 4
gpt4 key购买 nike

我有一个包含 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 中最初的“默认”值(因此列表显示为空白)。如果我在列表中选择一个值,它将正确显示。

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

最佳答案

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

发生这种情况是因为 JavascriptAngularJS 都如何设置初始对象值(请注意,如果选项是基元数组,则不会发生这种情况,例如作为数字和字符串): {}{} 从人类的 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,则此操作将不起作用,因为它不会与其中任何对象匹配]

关于javascript - Angularjs 选择组和初始值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46693729/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com