<!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. line-height

    如何实现左右两边有小竖线,但是高度比中间的字短? 用line-height,把line-height设置得跟height一样大,同时把font-size设置比line-height大即可

  2. （转）Spring Boot(十一)：Spring Boot 中 MongoDB 的使用

    http://www.ityouknow.com/springboot/2017/05/08/spring-boot-mongodb.html MongoDB 是最早热门非关系数据库的之一,使用也比较 ...

  3. ES5-ES6-ES7_数值的扩展

    二进制与八进制数值表示法: 二进制用0b, 八进制用0o console.log(0b1010) console.log(0o56) Number.isFinite(i) 判断是否是有限大的数 con ...

  4. 如何生成git ssh key

    公司有自己的git版本控制,自己注册账号后,管理员同意,就可以查看项目代码了,但是要克隆的话需要在本地生成git ssh key 一.进入.ssh文件夹. cd ~/.ssh 若没有.ssh文件夹,则 ...

  5. Insert Into 语句的语法错误

    错误示意: 一开始程序是: 改正: 一条很简单的插入语句竟然会报错,然而直接在数据库的查询中执行中却没有问题,这个问题困扰了不少时间. 数据库使用的是ACCESS,INSERT INTO语句为inse ...

  6. maven 标签classifier 研究一下

    研究一下maven的标签: <dependency> <groupId>io.netty</groupId> <artifactId>netty-tcn ...

  7. KazaQ's Socks （找规律）

    #include<iostream> using namespace std; #define ll long long ll n, m; ll t; int main(){ while ...

  8. Spring Security（四）：2.1 Introduction What is Spring Security?

    Spring Security provides comprehensive security services for Java EE-based enterprise software appli ...

  9. 初学Python——面向对象编程

    一.面向对象 or 面向过程? 编程范式: 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所 ...

  10. Linux并发与同步专题 (3) 信号量

    关键词:Semaphore.down()/up(). <Linux并发与同步专题 (1)原子操作和内存屏障> <Linux并发与同步专题 (2)spinlock> <Li ...