AngularJS - 使用来自 REST API 的 JSON 填充 HTML 下拉列表（没有 $scope）

Question

Stack Overflow 上与填充下拉菜单相关的许多解决方案包括 $scope。

我的第二个下拉菜单取决于我的第一个下拉菜单的值，因此我在第一个 HTML 上使用 ng-changeselect 将模型 ID 参数传递到第二个下拉菜单的函数中。

第一个下拉 HTML 和 Angular JS：

<select data-ng-controller="addAssetController as addAssetCtrl" id="functionalOrg" data-ng-model="addAssetFormCtrl.functionalOrg.id" ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)">

    <option data-ng-repeat="functionalOrg in addAssetCtrl.functionalOrgs | orderBy:'id' track by $index" value="{{functionalOrg.id}}">
        {{functionalOrg.id}} - {{functionalOrg.account}}
    </option>

</select>

因此ng-change:

ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)"

-

var vm = this;

functionalOrganisationRepository.getFunctionalOrganisation().then(function (results) {
    vm.functionalOrgs = results;
}, function (error) {
    vm.error = true;
    vm.errorMessage = error;
});

第二个下拉式 HTML 和 Angular：

<select data-ng-controller="addAssetController as addAssetCtrl" id="location" data-ng-model="addAssetFormCtrl.location.id">

    <option data-ng-repeat="location in addAssetCtrl.locations | orderBy:'id' track by $index" value="{{location.id}}">
        {{location.id}} - {{location.address6}}
    </option>

</select>

-

vm.getLocations = function(id) {

    console.log("Functional org ID:" + id);

        locationRepository.getLocation(id).then(function (results) {
            vm.locations = results;
        }, function (error) {
            vm.error = true;
            vm.errorMessage = error;
        });
}

假设我的服务层没问题，并带回了一个 JSON 对象，里面包含我需要的一切，那么问题可能是什么？ vm.getLocations 函数肯定会被调用，因为正在打印我的控制台日志。服务层也很好，因为我的命令提示符会记录一个 JSON 对象。

我的问题是如何从getLocations 返回的任何 JSON 中填充我的第二个下拉列表？因此，我不想在 Angular 中使用 $scope。

Answer 1

每次选择都会重复“ng-controller”属性。只在父元素上放置一次属性！

<div data-ng-controller="addAssetController as addAssetCtrl">

<!-- Drop Down 1 and 2 here -->

</div>

Answer 2

如果你不共享范围，你就不能做你想做的事。这意味着如果您没有父虚拟机或将某些内容传递给您的指令=，您将无法判断选择了什么。

将您的控制器提升一个级别并在选定的之间共享它，否则您将不得不观察服务中的共享变量，或者依靠$on 和$broadcast 进行通信。

Answer 3

很确定这是因为它们有不同的作用域和不同的控制器。

假设实际的 HTML 如下所示：

<select data-ng-controller="addAssetController as addAssetCtrl" id="location" data-ng-model="addAssetFormCtrl.location.id">

    <option data-ng-repeat="location in addAssetCtrl.locations | orderBy:'id' track by $index" value="{{location.id}}">
        {{location.id}} - {{location.address6}}
    </option>

</select>

<select data-ng-controller="addAssetController as addAssetCtrl" id="functionalOrg" data-ng-model="addAssetFormCtrl.functionalOrg.id" ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)">

    <option data-ng-repeat="functionalOrg in addAssetCtrl.functionalOrgs | orderBy:'id' track by $index" value="{{functionalOrg.id}}">
        {{functionalOrg.id}} - {{functionalOrg.account}}
    </option>

</select>

然后，据我所知，每个选择都会得到一个不同的控制器实例，每个实例都有不同的范围。所以你实际上有一个控制器addAssetCtrl1 和addAssetCtrl2，所以在1 上设置数据不会在2 上设置它。

解决方案是在父控制器上设置数据，或者更简单地说，执行以下操作：

<div data-ng-controller="addAssetController as addAssetCtrl">
    <select id="location" data-ng-model="addAssetFormCtrl.location.id">

        <option data-ng-repeat="location in addAssetCtrl.locations | orderBy:'id' track by $index" value="{{location.id}}">
            {{location.id}} - {{location.address6}}
        </option>

    </select>

    <select id="functionalOrg" data-ng-model="addAssetFormCtrl.functionalOrg.id" ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)">

        <option data-ng-repeat="functionalOrg in addAssetCtrl.functionalOrgs | orderBy:'id' track by $index" value="{{functionalOrg.id}}">
            {{functionalOrg.id}} - {{functionalOrg.account}}
        </option>

    </select>
</div>