Angular MVC
2023-09-11 14:17:23 时间
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="dish in dishList">
<img ng-src="img/{{dish.imgUrl}}" alt=""/>
<h2>{{dish.name}}</h2>
<p>{{dish.price}}</p>
</li>
</ul>
<button
ng-show="hasMore"
ng-click="handleClick()">
加载更多
</button>
<p ng-hide="hasMore">
没有更多数据可以加载了
</p>
</div>
<script>
//模块的创建和使用
var app = angular.module('myApp', ['ng']);
//完成控制器的创建和使用
app.controller('myCtrl', function ($scope) {
//定义模型数据
$scope.dishList = [
{imgUrl: '1.jpg', name: '水仙花', price: 20},
{imgUrl: '2.jpg', name: '百合', price: 22},
{imgUrl: '3.jpg', name: '郁金香', price: 21},
];
//当按钮点击时,设置为false(假设)
$scope.hasMore = true;
//定义按钮点击的处理函数
$scope.handleClick = function () {
//向数组中插入一条数据
var obj = {imgUrl: '4.jpg', name: '薄荷', price: 20};
$scope.dishList.push(obj);
$scope.hasMore = false;
}
console.log($scope);
})
</script>
</body>
</html>
相关文章
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(下)
- [Angular] ngPlural
- [Angular] Short Imports with TypeScript Path Mapping
- [Angular] Using the platform agnostic Renderer & ElementRef
- [Angular Form] ngModel and ngModelChange
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [AngularJS] angular-md-table for Angular material design
- [AngularJS] Angular 1.5 $transclude with named slot
- [Angular 2] Pipe Purity
- [Angular 2] Adding a data model
- [Angular 2] 6. Binding (not .apply(), .digest())
- [Angular] Overlay CDK
- [Angular] Two ways to create Angular Animation, using animation() or using state()
- [Angular] Adding keyboard events to our control value accessor component
- 如何创建 Angular 库并在 Angular 应用里调用
- 一个好用的查看Angular应用ngrx状态的Chrome扩展:Redux devTools
- Angular.js 页面里的按钮点击事件处理
- 关于 Angular 12 的 inlineCriticalCss 选项
- Angular 项目里 angular.json 文件内容的学习笔记
- Angular应用的angular.json文件字段一览
- 【Angular专题】 (3)装饰器decorator,一块语法糖
- MVC/MVP/MVVM区别——MVVM就是angular,视图和数据双向绑定