<!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. 处理HTML5新标签的浏览器兼容问题

    <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"& ...

  2. vue项目,ie11 浏览器报 Promise 未定义的错误

    报错:  {description: "“Promise”未定义", message: "“Promise”未定义", name: "Referenc ...

  3. UVA12627-Erratic Expansion（递归）

    Problem UVA12627-Erratic Expansion Accept: 465  Submit: 2487Time Limit: 3000 mSec Problem Descriptio ...

  4. 【转】TCP和SOCKET关系

    socket是TCP/IP协议的API   TCP是数据的介质,Socket是TCP的介质. 查了一下RFC文档,Socket是RFC147,更新时间是1971年.TCP是RFC793,更新时间是19 ...

  5. torch.nn.functional中softmax的作用及其参数说明

    参考:https://pytorch-cn.readthedocs.io/zh/latest/package_references/functional/#_1 class torch.nn.Soft ...

  6. hyperledge环境安装

    1.安装环境 1)本机安装 前提是已经安装好了docker\docker-compose\go,相应的内容可见 docker-1-环境安装及例子实践 docker官方文档学习-1-Docker for ...

  7. Pycharm 自定义快捷键

    之前使用 Eclipse 时,快捷键 Ctrl + M 会使当前窗口最大化.这里配置 PyCharm 具有相同功能. 1)打开 File  >  Settings  >  Keymap 2 ...

  8. face recognition[翻译][深度人脸识别:综述]

    这里翻译下<Deep face recognition: a survey v4>. 1 引言 由于它的非侵入性和自然特征,人脸识别已经成为身份识别中重要的生物认证技术,也已经应用到许多领 ...

  9. docker学习(1)--基础概念

    转载请注明源文章出处:http://www.cnblogs.com/lighten/p/6841677.html 1.前言 docker的官网:这里.下一段摘自官网描述. docker是世界领先的软件 ...

  10. 实现RunOnUiThread和RunOnUiThreadBlock

    现在需要实现一个工具类,RunUtils,这个类中包含runOnUiThread(Context context, Runnable runnable)和runOnUiThreadBlock(Cont ...