Question

我使用select标签创建了两个下拉列表，我想根据第一个下拉选项更新第二个下拉选项值，并根据第二个下拉选项更新下面的值。

我听说过我可以使用$ apply，但我不知道该把它放在哪里以及如何使用它。我会提出任何建议，我应该改变什么才能使其发挥作用。

这些是我的文件。

＆＃13;

angular.module('app', []).controller('contr', function ($scope) {

    $scope.data = [
		{
		    name: 'Ala',
		    holiday: [
                { month: 'June', location: ['Rome', 'Wien'] },
                { month: 'July', location: ['Budapest', 'Bucharest'] },
                { month: 'August', location: ['Warsaw', 'Prague']}
		    ]
		},
		{
		    name: 'Bob',
		    holiday: [
              { month: 'January', location: ['Paris', 'Madrid'] },
              { month: 'February', location: ['London', 'Dublin'] },
		    ]
		}
    ];

    $scope.person = $scope.data[0];
    $scope.holidays = $scope.person.holiday;
    $scope.holiday = $scope.holidays[0];
    $scope.locations = $scope.holiday.location;
});

＆＃13;

<!doctype html>
<html ng-app='app' ng-controller='contr'>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="js/myApp.js"></script>
    <script src="js/angular.js"></script>

    Person:<select ng-model='person' ng-options='info as info.name for info in data'></select></br>
    Month:<select ng-model='holiday' ng-options='holiday as holiday.month for holiday in holidays'></select></br>
	</br>Places:</br>
    <div ng-repeat='location in locations'>Location: {{location}}</div>
</body>
</html>

＆＃13;

Answer 1

此处不需要

$scope.apply。您可以使用apply在角度的摘要周期之外进行角度感知范围更改。

$watch就是你想要的

$scope.$watch('person', function(newPerson) {
    $scope.holidays = newPerson.holiday;
    $scope.holiday = $scope.holidays[0];
});

您还可以更改假期下拉列表中的ng-options

<select ng-model='holiday' ng-options='holiday as holiday.month for holiday in person.holiday'></select>

来自docs：

$ apply（）用于从角度框架外部以角度执行表达式。（例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。因为我们正在调用角度框架，所以我们需要执行异常处理的适当范围生命周期，执行监视。

$apply docs：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$ apply

$watch docs：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$ watch

Answer 2

在您的情况下无需添加手表。试试这个。

<!doctype html>
<html ng-app='app' ng-controller='contr'>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        angular.module('app', []).controller('contr', function ($scope) {

            $scope.data = [
                    {
                        name: 'Ala',
                        holiday: [
                            {
                                month: 'June',
                                location: ['Rome', 'Wien']
                            },
                            {
                                month: 'July',
                                location: ['Budapest', 'Bucharest']
                            },
                            {
                                month: 'August',
                                location: ['Warsaw', 'Prague']
                            }
                        ]
                    },
                    {
                        name: 'Bob',
                        holiday: [
                            {
                                month: 'January',
                                location: ['Paris', 'Madrid']
                            },
                            {
                                month: 'February',
                                location: ['London', 'Dublin']
                            },
                        ]
                    }
                ];

            $scope.SetMonthValue = function(){
                $scope.holiday = $scope.person.holiday[0];
            }
            
            $scope.person = $scope.data[0];
            $scope.holidays = $scope.person.holiday;
            $scope.holiday = $scope.holidays[0];
            $scope.locations = $scope.holiday.location;
        });
    </script>


    Person:
    <select ng-model='person' ng-change="SetMonthValue()" ng-options='info as info.name for info in data'></select>
    Month:
    <select ng-model='holiday' ng-options='holiday as holiday.month for holiday in person.holiday'></select>    
    Location
    <select ng-model='location' ng-options='location for location in holiday.location'></select>

    <div>Location: {{holiday.location}}</div>    
    
    <div>Third dropdown value: {{location}}</div>

</body>

</html>

由于您需要第二个选择选项，具体取决于第一个选择框中选择的值，因此请使用source作为第一个选择框的第一个ng-model值，

我已将此案例扩展到此示例中的第三级以进一步理解，即根据在第二个中选择的值添加第三个位置组合框。

为这些目的添加手表不是一个好的解决方案。尽量避免在最大可能情况下观察变量。

AngularJS - 更新选择下拉列表更改的页面视图

2 个答案: