Question

我试图根据通过选择框在视图中进行的选择来显示来自大型数据对象的不同数据。我正在填充像这样的数据

$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];

我的选择选项上有ng-model。

<select ng-model="networkType">
    <option value="networkOne">One</option>
    <option value="networkTwo">Two</option>
    <option value="networkThree">Three</option>
</select>

<select ng-model="selectedType">
    <option value="typeOne">One</option>
    <option value="typeTwo">Two</option>
    <option value="typeThree">Three</option>
</select>

我初始化这两个变量

    $scope.selectedType = 'individual';
    $scope.networkType = 'inNetwork';

$ scope.displayData最初是正确的。但是，当我更改下拉列表时，displayData不会更改其值以访问新数据。我不知道我在这里缺少什么步骤。

Answer 1

我认为你应该使用ng-change事件更新显示数据。

在控制器中添加更新功能

$scope.updateDisplay = function() {
    $scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
};

为ng-change元素添加<select>

<select ng-model="networkType" ng-change="updateDisplay()">
    <option value="networkOne">One</option>
    <option value="networkTwo">Two</option>
    <option value="networkThree">Three</option>
</select>

<select ng-model="selectedType" ng-change="updateDisplay()">
    <option value="typeOne">One</option>
    <option value="typeTwo">Two</option>
    <option value="typeThree">Three</option>
</select>

Answer 2

或者使用$ scope。$ watch。

$ scope.watch（）函数创建一个变量的监视。注册手表时，您将两个函数作为参数传递给$ watch（）函数：

值函数
听众功能

第一个函数是值函数，第二个函数是监听器函数。

值函数应返回正在监视的值。然后，AngularJS可以根据watch函数上次返回的值检查返回的值。这样，AngularJS可以确定值是否已更改。

在我的示例中，我们在networkType和selectedType模型上设置监视。而不是它是一个功能，我们只是放置$ scope模型名称。

$scope.$watch('[networkType,selectedType]', function(newValues, oldValues) {
    $scope.displayData = $scope.dataObj[newValues.selectedType][newValues.networkType];
});

Answer 3

将此方法添加到控制器

$scope.onChnage = function () {
        $scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
}

HTML

<select ng-model="networkType" ng-change="onChnage ()">
    <option value="networkOne">One</option>
    <option value="networkTwo">Two</option>
    <option value="networkThree">Three</option>
</select>

<select ng-model="selectedType" ng-change="onChnage ()">
    <option value="typeOne">One</option>
    <option value="typeTwo">Two</option>
    <option value="typeThree">Three</option>
</select>

Answer 4

除了$ watch和ng-change，如果你只想在displayData变量中显示数据，另一个选择是将它转换为函数display（）：

$scope.display = function () {
    return $scope.dataObj[$scope.selectedType][$scope.networkType];
};

并在视图中：

{{display()}}

只要selectedType或networkType更改

，就会再次调用此函数

Angular：动态价值问题

4 个答案: