1-11.Angular数据双向绑定

数据双向绑定:

  • 模型的数据可以绑定到视图中

  • 视图的数据可以绑定到模型中

  • 想要实现视图数据绑定到模型,必须要借助表单.

  • 在表单中使用ng-model, 在input标签中绑定属性

  • ng-mode= "属性名称"

<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">
    <h2>价格计算器</h2>
    数量: <input type="number" ng-model="quantity">
    价格: <input type="number" ng-model="price">

    <p>总价: {{quantity * price}}</p>

</div>

</body>
<script src="js/angular.js"></script>
<script>
  /*  //1.创建模块
    var app = angular.module('app', []);
    //2.创建控制器
    app.controller('xmgController', ['$scope', function ($scope) {
        $scope.name = "";

    }]);*/

    //3.绑定模块 ng-app="app"
    //4.绑定控制器 ng-controller="xmgController"

</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 5,574评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,833评论 19 139
  • 基础ng属性指令 布尔属性 布尔属性代表一个true或false值。当这个属性出现时,这个属性的值就是true(无...
    oWSQo阅读 5,020评论 0 0
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 6,850评论 0 8
  • 浮躁。是我当前最大的劲敌。 沉不下心去完成一件事,所以到最后的结果总是不那么满意,后悔,遗憾,堆积久了,就会丧失自...
    Saysorry阅读 2,600评论 0 0

友情链接更多精彩内容