<!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. nuxt框架Universal和Spa两种render mode的区别

    如下图,官网上对于Universal 和 Spa 两种render mode的区别,并没有加以说明,相信大多数人跟我一样有点懵,不知道选什么好.虽然两个模式创建的项目看不出区别. 先给出推荐选项: U ...

  2. P1279 字串距离 dp 洛谷

    题目描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X ...

  3. 单片机与android手机通信（控制LED小灯亮灭）

    1.单片机实验板功能设计 为验证数据通信内容,让单片机板上的四个按键与android手机客户端上的四个LED灯相互控制:为达到上述基本实验要求,采用单字符传输数据即可,硬件需设计两块相同的单片机电路板 ...

  4. 转://Oracle打补丁方法论

    成熟的IT企业,往往会有自己的补丁计划.如一年打几次补丁,打哪一个补丁. 在补丁之前,需要进行补丁分析,一份比较完善补丁分析,往往能帮助企业未雨绸缪,提前将可能引发的问题先解决掉,保证生产的稳定和安全 ...

  5. Python：Day48 Jquery

    引用方式: <script src="jquery-3.3.1.js"></script> jQuery就是一个jQuery对象,可以简写成$ 基本语法:$ ...

  6. Python框架学习之Flask中的视图及路由

    在前面一讲中我们学习如何创建一个简单的Flask项目,并做了一些简单的分析.接下来在这一节中就主要来讲讲Flask中最核心的内容之一:Werkzeug工具箱.Werkzeug是一个遵循WSGI协议的P ...

  7. 【转】MySQL中的行级锁,表级锁,页级锁

    在计算机科学中,锁是在执行多线程时用于强行限制资源访问的同步机制,即用于在并发控制中保证对互斥要求的满足. 在数据库的锁机制中介绍过,在DBMS中,可以按照锁的粒度把数据库锁分为行级锁(INNODB引 ...

  8. 20175234 数据库MySQL（课下作业）

    20175234 数据库MySQL(课下作业) 内容: 1.下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SE ...

  9. [SHOI2006]color 有色图[群论、组合计数]

    题意 用 \(m\) 种颜色,给 \(n\) 个点的无向完全图的 \(\frac{n(n-1)}{2}\) 条边染色,两种方案相同当且仅当一种方案交换一些点的编号后可以变成另一种方案.问有多少本质不同 ...

  10. Java虚拟机性能监测工具Visual VM与OQL对象查询语言

    1.Visual VM多合一工具 Visual VM是一个功能强大的多合一故障诊断和性能监控的可视化工具,它集成了多种性能统计工具的功能,使用 Visual VM 可以代替jstat.jmap.jha ...