javascript - ng-if 和 ng-show 无法切换表的可见性

标签 javascript html css angularjs

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

ng-应用

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 对象。如前所述,代码昨天运行良好,这可能与我的本地主机配置有关,还是我遗漏了一些明显的东西。

最佳答案

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

关于javascript - ng-if 和 ng-show 无法切换表的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55534167/

相关文章:

javascript - 在行中放置可变长度的 div

jquery - 将 nivoslider 数字更改为元素符号,即使使用主题也不起作用

asp.net - 如何使 HTML 页面适合 Web 浏览器大小?

html - flex 容器内的居中元素正在增长并溢出到顶部

javascript - 如何将数组作为 JavaScript 中的新属性推送到另一个数组元素中?

javascript - Jquery数据表 Entity Framework 复选框更新数据库

javascript - 父级可调整大小时,如何防止嵌套DIV的内容溢出父级?

html - 是否可以对 DIV 的背景颜色不透明度进行动画处理?

javascript - 如何恢复嵌入的 YouTube 视频?

javascript - 对象的属性显示为未定义