开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ng-repeat属性不起作用。我正在使用angularJs，但ng-repeat不起作用。以下是我的代码

ng-repeat 是 AngularJS 中用于迭代数组或对象的指令。如果 ng-repeat 不起作用，可能是由于多种原因造成的。以下是一些常见的问题和解决方法：

1. 确保 AngularJS 已正确加载

首先，请确保你已经在 HTML 文件中正确引入了 AngularJS 库，并且没有发生错误。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

2. 确保你的应用模块已正确创建

确保你已经定义了一个 AngularJS 应用模块，并且在 HTML 中使用了 ng-app 指令来指定这个模块。

<body ng-app="myApp">

var app = angular.module('myApp', []);

3. 确保控制器已正确设置

如果你在 ng-repeat 中使用了控制器，确保控制器已经被定义并且在 HTML 中通过 ng-controller 指令引用。

app.controller('myCtrl', function($scope) {
    $scope.items = [
        {name: 'Item 1'},
        {name: 'Item 2'},
        {name: 'Item 3'}
    ];
});

<div ng-controller="myCtrl">
    <div ng-repeat="item in items">
        {{ item.name }}
    </div>
</div>

4. 检查语法错误

确保 ng-repeat 的语法是正确的。例如：

<div ng-repeat="item in items">
    {{ item.name }}
</div>

5. 检查数据绑定

确保 ng-repeat 绑定的数据是存在的，并且是一个数组或对象。

6. 检查浏览器控制台

打开浏览器的开发者工具，查看控制台是否有任何错误信息。这些信息可能会提供问题的线索。

7. 确保没有 CSS 影响

有时候，CSS 样式可能会影响元素的显示，即使 AngularJS 已经正确渲染了内容。检查是否有隐藏元素的样式。

示例代码

以下是一个完整的示例，展示了如何使用 ng-repeat：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS ng-repeat Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <div ng-repeat="item in items">
        {{ item.name }}
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.items = [
                {name: 'Item 1'},
                {name: 'Item 2'},
                {name: 'Item 3'}
            ];
        });
    </script>
</body>
</html>

相关搜索:我正在使用fullCalender，但dayrender不起作用虽然我使用的是笔划属性，但SVG -笔划宽度不起作用如果我在angularjs的<ul>中包含了class=“侧边栏-菜单”，ng-repeat就不起作用我正在尝试测试我的代码，但是我对set方法的测试不起作用我正在尝试使用servlet和以下代码绘制形状，但图像未显示我正在学习webpack，我正在尝试进行api调用，但它不起作用。这是我的代码我正在使用的包在Javascript/HTML中不起作用我正在尝试在工具提示中显示元素数据。但是工具提示似乎不起作用。是因为ng-repeat吗？我正在读取未定义的属性映射。我已经尝试了所有方法，但都不起作用其他用户wp主题选项显示我正在尝试隐藏，但代码不起作用您好，我正在尝试在VScode中导入/安装请求和漂亮的汤，但以下操作不起作用我正在尝试读取Openfiles.exe的输出，但这不起作用我正在使用@media query，但我在不同屏幕上编写的代码不起作用 sendKeys和click()不起作用。无法获取元素，我正在使用protractor javascript代码当我使用Angularjs的ng-repeat时，我需要防止在特定“类”上的迭代。有人能帮我吗？对我malloc的数据使用free是不起作用的我想使用疫苗的图标，但当我添加它的代码时它不起作用在我的Vue代码中创建外部POST是不起作用的我是使用Knockout js的新手，我尝试显示一个列表，但得到以下错误代码按我想要的方式工作，但使用的是"Uncaught“

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

2-进军 angular1.x 表达式和指令

tips 每个页面只有一个 ng-app 指令，多的不起作用 1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上...2.ng-app作用：告诉子元素指令是属于angularJs。 3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。...： {{ firstName }}p> div> 复制代码数据绑定上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。...属性 div> //类名 div> //注释复制代码当然方法太多也不好，我这里推荐使用和...}; }); //restrict 值可以是以下几种: 复制代码总结一下 angular 自定义的几种写法 1、上面这种要清晰一下 // angular.module('MyApp',[]) //

2.4K2 0

AngularJS指令「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。 AngularJS指令 AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。...ng-model 指令把元素值（比如输入域的值）绑定到应用程序。使用 *ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。...1.关于数据的绑定：上面实例中的{ { firstName }}表达式是一个AngularJS数据绑定表达式。...2.重复HTML元素 ng-repeat指令会重复一个HTML元素：使用 ng-repeat..." }; }); restrict值可以是以下几种： E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用默认是EA。

1.1K2 0

Angularjs基础(五)

AngularJS Select(选项框) 　　　　AngularJS 可是使用数组或对象创建一个下拉列表选项。...　　　　　　　　ng-repeat指令是通过数组来循环HTML 代码来创建下拉列表，但ng-options指令更适合创建下拉列表,它有一下优势　　　　使用ng-options...的选项的一个对象,ng-repeat是一个字符串。...key-value 对中的 key , 直接使用对象的属性：　　　　　　　　<select ng-model="selectedCar" ng-options="y.brand for (x,...在现代浏览器中，为了数据<em>的</em>安全，所又请求被严格限制在同一域名下，如果需要调用不同站点数据，需要通过跨域来解决。　　　　　　<em>以下</em><em>的</em>PHP<em>代码</em>运行<em>使用</em><em>的</em>网站进行跨域访问。

3.3K5 0

如何使用 AngularJS 构建功能丰富的表格？

在 Web 开发中，表格是一种常见的数据展示方式。AngularJS 提供了强大的指令和服务，使得表格的创建和操作变得更加简单、高效。...如果尚未安装，请根据AngularJS官方文档的指引执行安装步骤。创建基本的表格在 AngularJS 中，我们可以使用 ng-repeat 指令迭代一个数组，以动态生成表格的行。...以下是一个基本的表格示例：姓名年龄性别 {{column}} <!

2762 0

Angularjs基础(二)

AngularJS指令　　　　AngularJS通过被称为指令的新属性来扩展HTML，带有前缀 ng-。　　　　...：{{firstName}} 　　　　　　　　　　　　　　ng-app 指令告诉AngularJS元素是AngularJS 应用程序的拥有者。　　　　...一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。数据绑定　　　　上面实例中的{{firstName}}表达式是一个AngularJS数据的绑定的表达式。　　　　...AngularJS中的数据绑定，同步了AngularJS表达式月AngularJS数据　　　　　　{{firstName}} 是通过ng-model="firstNmae"进行同步。　　　　...　　　　　　　　E只限元素名使用　　　　　　　　A只限属性使用　　　　　　　　C只限类名使用　　　　　　　　M只限属实使用

3.5K6 0

AngularJS 指令

AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。...AngularJS 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀ng-。 ng-app指令初始化一个 AngularJS 应用程序。 ng-init指令初始化应用程序数据。...数据绑定上面实例中的{{ firstName }}表达式是一个 AngularJS 数据绑定表达式。...AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。 {{ firstName }}是通过ng-model="firstName"进行同步。...ng-repeat指令会重复一个 HTML 元素： AngularJS 实例使用 ng-repeat 来循环数组 {{ x }} 尝试一下 » ng-repeat指令用在一个对象数组上

3.4K10 0

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。...x}} ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options...的选项是一个对象， ng-repeat 是一个字符串。...有局限性，选择的值是一个字符串: 实例使用 ng-repeat: <option ng-repeat="x in sites" value...key-value 对中的 key , 直接使用对象的属性：实例 <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars

2.4K4 0

AngularJS 指令

AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。...---- AngularJS 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。...div> 元素是 AngularJS 应用程序的"所有者"。...数据绑定上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。...---- 创建自定义的指令除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。

3.1K2 0

AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。...---- 今天在使用Swiper的时候遇到这个问题：使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页，尝试将longSwipesRatio...的值修改到最小，仍然不起作用。...于是猜测swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。...后者原理和前者一样，只是将observe应用于Swiper的父元素。两者默认值都为false。所以在原来的swiper初始化代码中加上这两行即可。

1.8K5 0

【AngularJS】—— 1 初识AngularJs

这次正好学习AngularJS，直接复习一下前端的知识。目前这里还是弱点，慢慢深入的学习。　　AngularJS是Google的优秀的前端框架，目前已经应用于多个产品。　　...通过w3cschool.cc的学习，简单的了解了下它的使用方法，但是对于原理还没有理解。　　...通过简单的学习，大致了解了AngularJS的语法以及使用，包括如下的内容： 1 表达式　　支持普通的JS表达式，表达式通过{{}}使用。... 我的第一个表达式： {{ 5 + 5 }} 2 指令　　通过特定的标签指定，完成数据的绑定以及定义，抓取 {{ x.Name }} {{ x.Country }} 7 html dom 　　通过DOM元素的属性，控制节点

2.8K9 0

AngularJS简介

大家好，又见面了，我是你们的朋友全栈君。 AngularJS简介 AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。...HTML5允许扩展的（自制的）属性，以data-开头。 AngularJS属性以ng-开头，但是您可以使用data-ng-来让网页对HTML5有效。什么是AngularJS?...” }; }); 可以通过以下方式来调用指令：元素名、属性、类名、注释 restrict 属性设置指令只能通过某些方式来调用 var app = angular.module...Scope 是一个对象，有可用的方法和属性。 Scope 可应用在视图和控制器上。 AngularJS 应用组成如下： View(视图), 即 HTML。 ...是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

5K2 0

AngularJS系列之常用指令

那什么是AngularJS的指令呢，其实就是相当于HTML中的一些属性值，例如input中的type属性等等之类的。...下面就来介绍一下AngularJS中的指令： AngularJS 指令： AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。...: {{ firstName }} 从例子可以看出，先是在div中添加ng-app属性，表示这个div是AngularJS应用程序的所有者，这样接下来才可以继续使用其他的一些指令...除了上面说到的一些系统指令外，AngularJS中还可以自己定义指令，下面就给大家介绍一下AngularJS是如何实现自定义指令的：创建自定义的指令除了 AngularJS 内置的指令外，我们还可以创建自定义指令... restrict 值可以是以下几种:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用。

2.1K6 0

AngularJS 表格

ng-repeat 指令可以完美的显示表格。 ---- 在表格中显示数据使用 angular 显示表格是非常简单的： AngularJS 实例 <!...如果你使用的是 v1.5 以下版本，可以使用以下代码： var app = angular.module('myApp', []); app.controller('customersCtrl', function...orderBy 过滤器排序显示，可以使用 orderBy 过滤器: AngularJS 实例 <tr ng-repeat="x in names | orderBy : 'Country...过滤器转换为大写: AngularJS 实例 {{ x.Name }} {{ x.Country...}} ---- 使用 $even 和 $odd AngularJS 实例 <td

1.8K1 0

AngularJS：如何使用自定义指令来取代ng-repeat

对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。也别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。...替换ng-repeat的方法如果内容是静态的，我们不需要两种方式的绑定，只需要执行一次赋值语句{{::value}}就可以。如果anguluarJS是1.3以下的旧版本，是不支持的一次性绑定语法的。...那么最好的方法就是自定义指令，换言之，静态数据可以使用一些简单的方法来格式化。实现步骤首先创建无序列表，用于保存动态绑定的内容。...//$elem.append(tableRow); }); } } }); 总结在本文中，主要模拟了ng-repeat的工作方式和逻辑，但只限于静态内容...Wijmo 中提供了大量的支持 AngularJS 及 AngularJS 2 的Demo。 Wijmo 是为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。

2.5K7 0

（4）Angular的开发

angular框架，库，是一款非常优秀的前端高级JS框架，有了这个框架就可以轻松构建SPA应用程序，通过指令宽展了HTML，通过表达式绑定数据到HTML。.../ 更少的代码，实现更强劲的功能 ?.../releases 使用 CDN 上的 Angular.js http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js 使用 Bower...image.png HTML 页面中 ng-xxx 的属性称之为指令 ng-app 指令告诉 AngularJS，元素是 AngularJS 应用程序管理的边界 ng-model 指令把文本框的值绑定到变量...name 上 Angular 最大程度的减少了页面上的 DOM 操作让 JavaScript 中专注业务逻辑的代码通过简单的指令结合页面结构与逻辑数据通过自定义指令实现组件化编程我们需要本地运行

3.1K4 0

【AngularJS】 # AngularJS入门

大家好，又见面了，我是你们的朋友全栈君。 1....AngularJS SQL 使用 $http 从后台请求数据，后端代码可以访问数据库，然后将结果以 json 的形式返回 app.controller('sqlCtrl', function... 我是不可见的。 12">我是可见的。... 我是不可见的。我是可见的。 12....表单实例 novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

23.2K6 0

Angularjs基础(三)

如何使用Scope 　　　　　　当你在AngularJS创建控制器时，你可以将$scope对象当做一个参数传递：　　　　　　　　　　实例：控制器中的属性对应了视图上的属性：　　　　　　　　　　　　...scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。　　　　　　实例：如果你改变了视图，模型和控制器也会相应更新。　　　　　　　　...实例：当我们使用ng-repeat 指令时，没个重复项都访问了当前的重复对象。　　　　　　　　...，这里对应用的是一个字符串，并使用变量x 表示。...在AngularJS 使用$scope是一个应用像（属于应用变量和函数）　　　　　　　　　　控制器的$scope(相当于作用域，控制范围)用来保存AngularJS Mode(模型)的对象。

3.1K5 0

Angularjs基础(十)

的属性。　　　　　　　　　　　　...ng-class 指令的值可以是字符串，对象，或一个数组。　　　　　　　　　　　　如果是字符串，多个类名使用空格分隔。　　　　　　　　　　　　...如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。　　　　　　　　　　　　...ng-class-odd 指令需要与ng-repeat 指令搭配使用。　　　　　　　　...应用在加载时防止AngularJS 代码未加载完而出现的问题。

3.3K5 0

Angularjs基础(十二)

实例：在鼠标指针离开是执行表达式。　　　　　　　　　　　　　　div ng-mouseleave="count = ccount + 1" ng-init="count=0">鼠标从我这离开。...实例：以下段落不需要使用AngularJS 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　...这个代码不需要使用AngularJS：{{5+5}} 　　　　　　　　　　　　　　　　　　　　　　　　　　　　定义和用法：ng-non-bindable 指令用于告诉...ng-options指令使用数组来填充下拉列表,多次情况下与ng-repeat 指令一起使用。　　　　　　　　　　　　　　...ng-style 属性值必须是对象，表达式返回的也是对象。

3.1K10 0

AngularJS 指令的定义、语法、用法

指令是 AngularJS 中的核心概念之一，它允许开发者通过自定义 HTML 标签、属性或类名的方式来扩展 HTML 语义并增强页面的交互性和可重用性。...AngularJS 指令的定义AngularJS 指令是一种用于扩展 HTML 语义的标记或属性，它们可以在 HTML 文档中添加新的功能或修改现有的功能。...3.2 属性指令（Attribute Directives）属性指令是使用自定义 HTML 属性作为指令的名称。...AngularJS 指令的用法AngularJS 指令可以在 HTML 代码中任何地方使用，并且可以与控制器和作用域（Scope）结合使用，实现数据的双向绑定和页面元素的动态更新。...4.2 ng-repeat 指令ng-repeat 指令用于在 HTML 元素中重复渲染一段 HTML 代码，根据数组或对象的内容动态生成多个相同的

3163 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭