javascript - 下拉菜单不显示

Question

问题问题 -

我的 View 中有两个下拉菜单。第二个下拉依赖于第一个。但不知何故，第二个没有更新

//我的第一个下拉列表

  <select ng-controller="myController"
             ng-options="customer.name for customer in customerDetailData"  ng-model="customer"
             ng-change="updateCost(customer)">
                <option value="">Please select customer</option>
    </select>

//我的第二个下拉菜单

<select ng-controller="myController"
         ng-options="cc.name for cc in customerCostData">
      <option value="">Please select cost</option>
</select>

//我的 Controller

(function() {
    var myController = function($scope,Service){
        $scope.customerDetailData;
        Service.cust()
            .success(function(data){
                console.log(data)
                $scope.customerDetailData = data;
            })
            .error(function(status,error){

            })

        $scope.customerCostData;
        $scope.updateCost=function(customer){
            Service.cost(customer.id)
                .success(function(cost){
                    $scope.customerCostData= cost
                })
                .error(function(status,data){
                    console.log(status);
                    console.log(data);
                })
        }
    };
    myController .$inject = ['$scope','Service'];
    angular.module('app').controller('myController ',myController );
}());

我缺少什么吗？数据在控制台中传输良好。请指导我

Answer 1

这里有两件事要做:

1. 第一个也是主要的问题是您将 ng-controller 单独附加到每个 select。这意味着它实际上创建了 2 个独立的 Controller ，每个 Controller 对应一个选择，因此它们被赋予了不同的作用域。您需要将 ng-controller 属性应用于父元素，例如 form。

2. 第二个问题是，Angular 不会仅仅因为 ng-options 中使用了作用域变量而自动更新元素。因此，您需要给它一个ng-model，以便 Angular 正确地观察它。

以下是具有两个独立 Controller 实例的代码示例。请注意 2 个警报:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <form ng-app="myApp">
         <select ng-controller="myController"
             ng-options="customer.name for customer in customerDetailData"  ng-model="customer"
             ng-change="updateCost(customer)">
            <option value="">Please select customer</option>
        </select>

        <select ng-controller="myController"
            ng-options="cc.name for cc in customerCostData" ng-model="customercustomerCostData">
            <option value="">Please select cost</option>
        </select>
    </form>

    <script type="text/javascript">
        (function () {
            var myApp = angular.module('myApp', []);

            var myController = function ($scope) {
                alert('myController created');
                $scope.customerDetailData = [{ id: 1, name: "bob" }, { id: 2, name: "fred" }];

                
                $scope.updateCost = function (customer) {
                    $scope.customerCostData = [{ name: customer.id.toString() }, { name: 'x' }];
                }
            };
            myController.$inject = ['$scope'];
            myApp.controller('myController', myController);
        }());
    </script>

这里是将单个ng-controller应用于form，并将ng-model="customerCostData"应用于第二个选择，现在它可以工作了:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <form ng-app="myApp" ng-controller="myController">
         <select
             ng-options="customer.name for customer in customerDetailData"  ng-model="customer"
             ng-change="updateCost(customer)">
            <option value="">Please select customer</option>
        </select>

        <select
            ng-options="cc.name for cc in customerCostData" ng-model="customercustomerCostData">
            <option value="">Please select cost</option>
        </select>
    </form>

    <script type="text/javascript">
        (function () {
            var myApp = angular.module('myApp', []);

            var myController = function ($scope) {
                alert('myController created');
                $scope.customerDetailData = [{ id: 1, name: "bob" }, { id: 2, name: "fred" }];

                
                $scope.updateCost = function (customer) {
                    // would be an ajax call
                    $scope.customerCostData = [{ name: customer.id.toString() }, { name: 'x' }];
                }
            };
            myController.$inject = ['$scope'];
            myApp.controller('myController', myController);
        }());
    </script>