<!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. （转）Spring Boot (十五)： Spring Boot + Jpa + Thymeleaf 增删改查示例

    http://www.ityouknow.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html 这篇文章介绍如何使用 Jpa 和 ...

  2. B. Yet Another Array Partitioning Task ——cf

    B. Yet Another Array Partitioning Task time limit per test 2 seconds memory limit per test 256 megab ...

  3. CentOS7使用DevStack快速搭建OpenStack实验环境

    安装环境:centos7系统下安装devstack 一.下载Ubuntu14或者Centos7安装(实体机或者虚拟机都可以),建议选择最小安装镜像即可. 二.安装devstack 文档地址 http: ...

  4. Linux三剑客-AWK

    1.什么是awk AWK是一种处理文本文件的语言,是一个强大的文本分析工具.有统计和计算功能. 之所以叫AWK是因为其取了三位创始人 Alfred Aho,Peter Weinberger, 和 Br ...

  5. [容斥原理] hdu 4135 Co-prime

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4135 Co-prime Time Limit: 2000/1000 MS (Java/Others) ...

  6. 通过JS如何获取IP地址

    通过JS获取你真实的外网IP和内网IP,就算开代理也没有用,想想真是太可怕了,还能不能愉快的装逼了! 代码: //get the IP addresses associated with an acc ...

  7. 【Java基础】char

    1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a';  //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=1 ...

  8. MYSQL动态查询拼接的表名的SQL脚本实现（MYSQL动态执行SQL脚本）

    可以使用MYSQL的预处理逻辑:https://dev.mysql.com/doc/refman/8.0/en/sql-syntax-prepared-statements.html   例如: pr ...

  9. 总结一下linux中的分段机制

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 这篇文章主要说一下linux对于分段机制的处理,虽然都说linux不使用分段机制,但是分段机制属于CPU的一个功 ...

  10. [LOJ#517]. 「LibreOJ β Round #2」计算几何瞎暴力[trie]

    题意 题目链接 分析 记操作异或和为 \(tx\) ,最后一次排序时的异或和为 \(ax\) ,每个数插入时的 \(tx\) 记为 \(b\). 我们发现,一旦数列排序,就会变得容易操作. 对于新加入 ...