如何用angularjs的ng-repeat实现二级导航条

Posted 2023-03-16

首先我们使用工具建立一个文件夹名称为ng-repeat。然后在文件夹内建立两个文件分别为index.html，index.js。index.html根据截图编写界面模板。具体如图所示。

然后再index.html引入angularjs文件以及index.js文件。加入两行。分别为：
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="index.js"></script>

然后编写index.js。文件。文件内容为：
var app = angular.module("myApp",[]);

app.controller('simpleController',function($scope)

$scope.sites = [
name:'百度',path:'www.baidu.com',
name:'新浪',path:'www.sina.com.cn',
name:'腾讯',path:'www.qq.com'
]
);

然后再index.html文件内，定义angularjs的管理域，本篇为从html开始即为angularjs的管理域。然后编写核心处代码，代码为：
<div ng-controller="simpleController">
<ul>
<li ng-repeat="site in sites">
编号:$index+1 ----网站名称:site.name----网站地址:site.path
</li>
</ul>
</div>

最后点击运行index.html，本篇以google chrome浏览器打开。即可看到效果。是不是很神奇啊！！！

另外在此处还支持输入
$first意思为判断是否为第一个 返回结果为true/false。
$middle 判断是否为中间部分，返回结果为true/false。
$last 判断是否为最好一个，返回结果为true/false。
$even 判断是否为偶数，返回结果为true/false。
$odd 判断是否为单数，返回结果为true/false。 参考技术A 有一个angularjs material里面有好多控件，一般的都能满足，还有的就是用ng-repeat嵌套循环index为其索引值

AngularJS - 如何处理 ng-repeat 与预先存在的项目

【中文标题】AngularJS - 如何处理 ng-repeat 与预先存在的项目

【英文标题】：AngularJS - How to deal with ng-repeat with pre-exist items

【发布时间】：2013-03-29 23:25:31

【问题描述】：

我正在尝试将 ng-repeat 用于列表。但我想要使用 Django 呈现的预先存在的列表项。

注意：我已将 [ ] 设置为我的 AngularJS InterpolateProvider。

HTML 示例

<ul ng-controller="ListController">
    % for item in existing_list %
        <li>
            <span>item.firstName</span>
            <span>item.lastName</span>
        </li>
    % endfor %

    <li ng-repeat="item in items">
        <span>[item.firstName]</span>
        <span>[item.lastName]</span>
    </li>
</ul>

现在，我想使用 ng-controller 处理这些项目

app.js

function ListController($scope)
    $scope.items = [firstName: "Bob", lastName: "Smith"];

我的问题是，如何将 Django 生成的预先存在的列表项添加到 $scope.items 中？

【问题讨论】：

似乎将数据合并为 JSON 并使用 ng-repeat 创建所有项目更有意义。服务器上列表的硬编码部分的缺点是失去使用角度过滤列表的能力

只是想知道您是否解决了这个问题以及如何解决。我目前面临同样的问题。

【参考方案1】：

我现在的做法是使用ngInit 将现有数据注入范围。所以你会有这样的：

<ul ng-controller="ListController" ng-init='items = % existing_list.toJSON() %'>

（对不起，我不知道如何将对象序列化为 JSON）

【讨论】：

感谢您的回答。我已经想到了，但我真的想避免这种打印 JSON 以供 js 使用的确切方式