<!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>

Angular MVC的更多相关文章

  1. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  2. Angular——MVC模式开发实战

    创建项目 创建工作目录 使用bower下载需要插件 git init.add.commit之后得到分支master,再创建developer分支,然后再此分支上进行具体功能开发 MVC架构 之前小项目 ...

  3. Vue（MVVM）、React(MVVM)、Angular(MVC)对比

    前言 昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了.因为只用过Vue,不了解其他两个框架,今天就赶紧去了解一下他们之间的区别.大家发现 ...

  4. angular(mvc)指令的嵌套使用

    关于指令嵌套的使用,取值问题. 原理类似于控制器中使用指令,父指令类似于控制器,子指令就类似于控制器中指令.通过传值方式‘=’,我们直接可以在父指令中获取数据 举一个例子: 有个指令parentDir ...

  5. 带你初识Angular中MVC模型

    简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...

  6. angular中的MVC思想

    MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC ...

  7. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  8. angular总结控制器的三种主要职责： 为应用中的模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型的变化，做出相应的动作

    m1.双向数据绑定: <body> <div ng-app ng-init="user.name='world'"> <h1>使用NG实现双边数 ...

  9. Angular总结

    angular关键核心点进行总结 1 2 angular中有很多知识点需要学习,学习成本是很大的,我通过平常开发中把一些 很重要知识点总结下来,不管是以后拿来用,或者跳槽面试需要,我都感觉是很有帮助的 ...

随机推荐

  1. vue指令详解和自定义指令

    在vue中,指令以v-开头,是一种特殊的自定义行间属性,指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上 指令使用的示例 在下面的运行结果中可以看到,v-html是可以解析html标签的 ...

  2. linux下安装jdk_mysql_tomcat_redis

    目前搬我以前的笔记,每个人做笔记方式都不一样,看别人的风格,生成自己的风格 1.linux安装软件和redis学习 jdk --- java开发运行环境 Tomcat - WEB程序的服务器 Mysq ...

  3. masm的调试命令（debug）

    -u命令:查看汇编代码: -t命令:执行下一条语句 -g + 的内存:跳转到该内存所对应的语句(再用t命令执行该条命令) -r命令:查看寄存器的内容(后可直接接寄存器的名称,就只查看该寄存器的内容) ...

  4. 路由器安装Openwrt&&***

    路由器安装Openwrt&&*** 前言 对于给路由器刷系统,肯定是有风险的,敢于承担风险的才开始动手. Openwrt其实也是一款嵌入式Linux系统,对于闪存大小也是有一定的要求的 ...

  5. ajax如何增加请求头

    代码如下(主要关键就是headers,大家可以根据需要来增加请求头): $.ajax({ type: "POST", timeout: , // 超时时间 10 秒 headers ...

  6. C# GDI+双缓冲技术

    我想有很多搞图形方面的朋友都会用到双缓冲技术的时候,而且有的时候她的确是个头疼的问题.最近我也要用双缓冲技术,程序怎么调试都不合适,当要对图形进行移动时,总是会出现闪烁抖动.在网上找了些资料,说得都不 ...

  7. ModelViewSet 路由 / django logging配置 / django-debug-toolbar使用

    一.ModelViewSet 路由 因为我们正在使用ViewSet代替View,实际上已经不再需要自己来设计URL的配置了.将资源和视图.URL绑定到一起是一个可以自动完成的过程,只需要使用Route ...

  8. mac nginx 启动 自启动

    MacBook-Pro:local shihw$ brew services start nginx ==> Tapping homebrew/services Cloning into '/u ...

  9. mongodb .explain('executionStats') 查询性能分析(转)

    mongodb性能分析方法:explain() 为了演示的效果,我们先来创建一个有200万个文档的记录.(我自己的电脑耗了15分钟左右插入完成.如果你想插更多的文档也没问题,只要有耐心等就可以了.) ...

  10. UVA10838 The Pawn Chess

    UVA好题没人写系列,感觉可以稍稍练习一下面向对象编程的形式(大雾) 题意很简单,在国际象棋的棋盘中有一些兵,走到对方底线即为胜利,问最优决策下谁能获胜.并输出最小步数. 首先这里的棋盘都只有\(4\ ...