Angular隐藏行控制问题：取消Show All时仅隐藏已标记行

你当前代码存在两个核心问题：一是hidef是全局变量，勾选任意一个Hide复选框都会影响所有行；二是行的显示逻辑错误，导致取消Show All时所有行都消失。以下是修正方案：

核心修改思路 #

• 给每个水果对象添加独立的isHidden属性，存储该行的隐藏状态
• 将Hide复选框绑定到对应水果的isHidden属性，实现每行独立控制
• 调整行的显示条件：Show All勾选时显示所有行，取消时只隐藏标记过的行
• 新增水果时默认设置isHidden: false，确保新增行默认可见

修改后的HTML代码 #

<body ng-app="myApp" ng-controller="myController">
    <h1>Fruits in Vietnam</h1>
    <hr>
    <form name="myForm">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
                required>
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
                    ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
                </button>
            </div>
        </div>
    </form>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Description</th>
                <th>Hide</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <!-- 显示条件：Show All勾选则显示所有，否则只显示未标记隐藏的行 -->
            <tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !fruit.isHidden">
                <td>{{fruit.fruitname}}</td>
                <!-- 绑定到当前水果的isHidden属性，每行独立控制 -->
                <td><input type="checkbox" ng-model="fruit.isHidden"></td>
                <td>
                    <a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
                        <i class="glyphicon glyphicon-trash"></i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>

修改后的JavaScript代码 #

<script>
    var app = angular.module("myApp", []);

    app.controller('myController', function ($scope, $window) {
        $scope.fruitnameDetail = [
            {
                "fruitname": "Banana",
                "isHidden": false  // 添加初始隐藏状态
            },
            {
                "fruitname": "Mango",
                "isHidden": false
            },
            {
                "fruitname": "Orange",
                "isHidden": false
            }
        ];
        $scope.addnew = function () {
            var fruitnameDetail = {
                fruitname: $scope.mdfruitname,
                isHidden: false  // 新增水果默认不隐藏
            };
            $scope.fruitnameDetail.push(fruitnameDetail);
            $scope.mdfruitname = '';
        };
        $scope.removefruitname = function (index) {
            var name = $scope.fruitnameDetail[index].fruitname;
            if ($window.confirm("Do you want to delete " + name + " ?")) {
                $scope.fruitnameDetail.splice(index, 1);
            }
        };
    });
</script>

逻辑说明 #

• 每个水果对象的isHidden属性单独存储该行的隐藏状态，不会互相干扰
• 行的ng-show条件showall || !fruit.isHidden：当showall为true时，强制显示所有行；当showall为false时，仅显示isHidden为false的行（即未标记隐藏的行）
• 新增水果时默认设置isHidden: false，保证新增行默认处于可见状态

内容的提问来源于stack exchange，提问作者Toma