Question

问题 -

在我看来，我有两个下拉。第二次下降依赖于第一次下降。但不知何故，第二个没有得到更新

//我的第一次放下

  <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>

//我的控制器

(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

这里有两件事要做：

第一个主要问题是您将ng-controller分别附加到每个select。这意味着它实际上创建了2个独立的控制器，每个选择一个，因此它们被赋予不同的范围。您需要将ng-controller属性应用于父元素，例如form。
第二个问题是angular不会因为ng-options中使用范围变量而自动更新元素。因此，您需要给它一个ng-model，以便Angular正确地观察它。

以下是具有两个独立控制器实例的代码示例。请注意2个警报：

＆＃13;

<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>

＆＃13;

这是第一个ng-controller应用于form和ng-model="customerCostData" select，因此现在可以使用：

＆＃13;

<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>

＆＃13;

Answer 2

是Ajax请求结果的成本数据？如果是这样，您可能需要强制使用$ digest周期来让UI知道模型已被更改。您可以通过在$ timeout或$ apply中包含成本分配来实现此目的。

$timeout(function () {
    $scope.customerCostData = cost;
});

或

$scope.$apply(function () {
    $scope.customerCostData = cost;
});

下拉没有显示

2 个答案: