当前位置: 首页 > 面试题库 >

在AngularJS中切换数据模型以获取动态选择菜单

柯曦
2023-03-14
问题内容

我正在尝试做的是拥有三个不同的 _< select>_菜单,这些菜单将全部绑定到同一数据中。更改第一个选择菜单,将更改菜单2和3的数据。

这是我的控制器的内部:

$scope.data = [
        {
            "id" : "0",
            "site" : "Brands Hatch",
            "buildings" : [
                { "building" : "Building #1" },
                { "building" : "Building #2" },
                { "building" : "Building #3" }
            ],
            "floors" : [
                { "floor" : "Floor #1" },
                { "floor" : "Floor #2" },
                { "floor" : "Floor #3" }
            ]
        },{
            "id" : "1",
            "site" : "Silverstone",
            "buildings" : [
                { "building" : "Building #4" },
                { "building" : "Building #5" },
                { "building" : "Building #6" }
            ],
            "floors" : [
                { "floor" : "Floor #4" },
                { "floor" : "Floor #5" },
                { "floor" : "Floor #6" }
            ]
        }
    ];
到目前为止,这是我从参考资料中尝试的内容,该参考资料使用了我需要的相同想法: http
//codepen.io/adnan-i/pen/gLtap

当我从第 一个 选择菜单中选择“品牌舱口盖”或“银石”时,其他两个菜单的数据将更改/更新以与正确的数据相对应。我正在使用 $ watch
来监听更改,这些更改是从上面的CodePen链接获取的。

这是监视脚本(未经修改,显然不起作用):

$scope.$watch('selected.id', function(id){
        delete $scope.selected.value;
        angular.forEach($scope.data, function(attr){
            if(attr.id === id){
                $scope.selectedAttr = attr;
            }
        });
    });

据我所知,这将删除更改时的当前数据,然后遍历 $ scope.data
,如果attr.id与传递给函数的id匹配,它将把数据推回到更新视图的范围。我只是真正地将其结构化,并希望得到一些指导和帮助,因为我真的是AngularJS的新手。谢谢!:)

如果有人可以帮忙,请使用jsFiddle进行全面工作:http :
//jsfiddle.net/sgdea/


问题答案:

看看我在这里做了什么:http :
//jsfiddle.net/sgdea/2/

您根本不需要使用$watch-您只需要使每个从属选择的输入引用父项中的选择即可。

请注意ng-options第二个和第三个选择引用的selected.site,这是由第一个选择设置的:

<div ng-app="myApp" ng-controller="BookingCtrl">
    <select ng-model="selected.site"
            ng-options="s.site for s in data">
        <option value="">-- Site --</option>
    </select>
    <select ng-model="selected.building"
            ng-options="b.building for b in selected.site.buildings">
        <option value="">-- Building --</option>
    </select>
    <select ng-model="selected.floor"
            ng-options="f.floor for f in selected.site.floors">
        <option value="">-- Floor --</option>
    </select>
</div>

我在javascript中所做的只是删除了您的$watch

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'BookingCtrl', ['$scope', '$location', function ( $scope, $location ) {

    $scope.selected = {};

    $scope.data = [
        {
            "id" : "0",
            "site" : "Brands Hatch",
            "buildings" : [
                { "building" : "Building #1" },
                { "building" : "Building #2" },
                { "building" : "Building #3" }
            ],
            "floors" : [
                { "floor" : "Floor #1" },
                { "floor" : "Floor #2" },
                { "floor" : "Floor #3" }
            ]
        },{
            "id" : "1",
            "site" : "Silverstone",
            "buildings" : [
                { "building" : "Building #4" },
                { "building" : "Building #5" },
                { "building" : "Building #6" }
            ],
            "floors" : [
                { "floor" : "Floor #4" },
                { "floor" : "Floor #5" },
                { "floor" : "Floor #6" }
            ]
        }
    ];
}]);


 类似资料:
  • 问题内容: 我从bootswatch下载了主题,并试图允许用户切换主题。切换主题后,所有引导CSS都会暂时消失,直到加载新主题为止。在加载CSS之前如何防止更改,或者在加载新主题之前切换回默认主题? index.ejs(在头) 选拔 索引控制器 选择控制器 任何帮助表示赞赏!谢谢 问题答案: 我认为这不是AngularJS的问题。我认为您的方法应该有所不同。 据我所知,主题功能通常按以下方式实现。

  • 有人能推荐一个指南/教程来使用最佳实践在Rails中实现动态选择菜单/级联下拉菜单吗?或者可能是最近关于同一主题的问题。可能我找错了词。 我看了一下railscast:#88动态选择菜单(修订版),但不认为使用csv文件存储选项是最好的方法。 我发现的关于下拉列表的所有其他内容似乎都不完整或过时。

  • 我在mysql数据库中有名为的表,其中存在类、学生姓名等。 我想在jsp中使用select选项,这样当且仅当首先选择class时,在选择class之后,该特定类的所有学生姓名都应该通过从数据库中检索记录自动(动态)显示在另一个select下拉列表中。 在这里我想使用servlet进行数据库连接,并通过通过jsp访问所有数据库记录

  • 问题内容: 我需要使用jquery动态地将数据传递到我的选择列表。我在控制台中看到了该数据,但列表为空。您能帮我找到解决方案吗? 我的选择清单 问题答案: 将您的JavaScript代码更改为此

  • 本文向大家介绍获取jqGrid中选择的行的数据,包括了获取jqGrid中选择的行的数据的使用技巧和注意事项,需要的朋友参考一下 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: v

  • 描述 (Description) 您还可以使用HTML到App方法创建动态选择器模式。 它使用两个参数 - pickerHTML - 它包含pickerHTML模态的字符串元素。 removeOnClose - 它包含布尔值,当您关闭Picker时,它将从DOM中删除。 默认情况下,它包含真值。 例子 (Example) 以下示例演示了在Framework7中使用动态选择器模式 - <!DOCTY