【问题标题】：ng-if & ng-show failing to toggle visibility of tableng-if & ng-show 无法切换表格的可见性
【发布时间】：2019-04-05 19:59:27
【问题描述】：

我有以下 angularJS 代码，直到昨天它都运行良好。我不知道为什么这不起作用，无响应的角度标签 {{ variable }} 没有显示，因此我假设我已连接到我的 ng 应用程序。如前所述，没有任何改变我的数据源被 localhost 成功检索，我可以在开发人员工具中看到所有正确的内容都在那里。我搜索了任何小的语法错误，但找不到任何我完全不知道为什么这不起作用的东西。

ng-app

var app = angular.module("viewJSON",[]);
app.controller("viewCtrl",function Hello($scope, $http) {
       $http({
            method: 'GET',
            url: './data.json'
        }).then(function (response){
            $scope.products = response.data;

        },function (error){
            console.log("error");
        });
    });

html

<!DOCTYPE html>
<html ng-app="viewJSON">
<head>
   <link rel="stylesheet" href="home-page.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   <script src="home-page.js"></script>
</head>

<body ng-controller="viewCtrl">
    <div class="wrap">
        <div class="search" ng-innit="x=0">
            <b>Product Name:</b> <input type="text" ng-model="searchName" class="searchTerm" ng-keydown="x = x+1"><br>
            <b>Product Brand:</b> <input type="text" ng-model="searchBrand" class="searchTerm" ng-keydown="x = x+1">
        </div>
    </div>
    <div>
        <table class="resultContent" ng-if="x > 0">

            <tr>
                <th>Brand</th>
                <th>Name</th>
                <th>Price</th>
                <th>Retailer</th>
                <th>Image</th>
            </tr>

            <tr id="rows" ng-repeat="item in products" ng-if="searchName.length != 0 && searchBrand.length != 0" ng-show="item.name.includes(searchName) && item.brand.includes(searchBrand)">
                <td class="otherCol">{{ item.brand }}</td>
                <td class="otherCol">{{ item.name }}</td>
                <td class="otherCol">{{ item.price }}</td>
                <td class="otherCol">{{ item.retailer }}</td>
                <td class="imageCol"><img ng-src="{{ item.image_url}}"></td>
            </tr>

        </table>
    </div>
</body>
</html>

我已经尝试将脚本放在页面底部，就在结束正文标记的上方，如前所述，我相信 Angular 是响应式的，因为我在我的网页上没有看到任何 {{ x }} 标记。数据解析为 js 对象，也不会引发错误异常。正如昨天所说的代码运行良好，这可能与我的本地主机配置有关还是我遗漏了一些明显的东西。

【问题讨论】：

您是否收到任何控制台错误？那将是我要寻找的第一件事。此外，在 .then() 中添加一个 console.log 以查看 $scope.products 的输出。您还可以尝试发出 ng-if 以查看是否是阻止数据显示的原因，
在我的问题中错过了那个细节。控制台不会抛出任何错误。我现在测试输出。
我认为其中一个问题可能与 ng-src 有关 - 已经有一段时间了，但我认为当您使用任何类型的 ng-* 时，您不需要 {{ this }}跨度>
不使用ng-model 中的对象是不好的。特别是考虑到您使用嵌套的ng-if 结合ng-repeat 创建的所有子作用域。还可以将 ng-if 和 ng-repeat 和 ng-show 全部放在同一元素上，以简化 items 上的过滤逻辑
别担心，兄弟！我记得玩 angular 1 并且一无所知的日子。哎呀，我开始了商业学位！坚持下去，伙计，你学的越多，你就越喜欢它。另外，请记住在可以的地方回馈社区：) 我还建议您在准备好后离开 angular1 并转移到 vue.js、react 或 angular 2+。只有当你准备好时......但这会让你更好地前进。

标签： javascript html css angularjs

【解决方案1】：

您的“ng-init”中有错字，请将其替换为“ng-init”。

【讨论】：