Question

我有一个重复的div，它有一个select（下拉菜单），它包含3个选项'single'，'double'，'matrix'，在这个选定的值上我必须显示以下div。就像我从选择列表中选择双值一样，它应该显示其相对div。等等其他人

现在问题出在这里，当ng-repeat循环4次时然后我选择并更改其中一个下拉列表值，然后其他3个div也会生效，这不应该发生。

<div ng-repeat="data in dataList">
        <select ng-change="getData()" ng-model="getSelectedItem"
            ng-options="i.value as i.text for i in formList">
        </select>   

        <div ng-show="showPanel=='single'">
            ...
        </div>
        <div ng-show="showPanel=='double'">
            ...
        </div>
        <div ng-show="showPanel=='matrix'">
            ...
        </div>
        ...

    </div>

我的控制器代码

$scope.getSelectedItem = '';

$scope.getData = function(){
    if($scope.getSelectedItem == 'single'){
        $scope.showPanel='single'
    }else if($scope.getSelectedItem == 'double'){
        $scope.showPanel='double'
    }else if($scope.getSelectedItem == 'matrix'){
        $scope.showPanel='matrix'
    }
}

所以，我可以使用“getData（）”函数动态像每个ng-repeat的sperate一样以及如何在控制器中使用它。还是有另一种简单的方法通过它我可以执行ng-change事件，并且仅适用于该特定部分而不影响其他div。

请帮帮我

感谢。

Answer 1

如果您共享控制器代码也会更好。但我可以预测：

formList来自父作用域（即dataList）不来自ng-repeat子作用域（即不来自数据）
getSelectedItem也来自父作用域
您正在事件“ng-change”

以上更正？

Answer 2

尝试ngSwitch指令：https://docs.angularjs.org/api/ng/directive/ngSwitch

<div ng-repeat="data in dataList">    
    <select ng-model="getSelectedItem" ng-options="i.value as i.text for i in formList"></select>
    <div ng-switch on="getSelectedItem">
        <div ng-switch-when="single"> //SINGLE-CONTENT </div>
        <div ng-switch-when="double"> //DOUBLE-CONTENT </div>
        <div ng-switch-when="matrix"> //MATRIX-CONTENT </div>
    </div>
</div>

编辑：

如果您只想在一个迭代对象范围（数据）中执行某些操作，可以将其作为参数传递给函数。

ng-change="getData(data)"

然后在控制器中处理它。

EDIT2：

您还可以使用所选项的信息向迭代对象添加属性。您将确保选择与ng-repeat中的特定项目相关联。

ng-model="data.selectedItem"

如何在ng-repeat中动态创建ng-change

2 个答案: