zoukankan      html  css  js  c++  java
  • 创建双向数据绑定 ng-model

    双向数据绑定会从两个方向同时跟踪变化,允许元素从用户处收集数据以修改程序的状态。双向绑定通过 ng-model 指令来创建

    <!doctype html>
    <html lang="en" ng-app="exampleApp">
    <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/angular.js"></script>
    </head>
    <body>
    <div id="todoPanel" class="panel" ng-controller="defaultCtrl">
    <h3 class="panel-header">To Do List</h3>

    <div class="well">
    <div>
    The first item is: {{todos[0].action}}
    </div>
    </div>

    <!--ng-model 双向绑定,仅能应用在那些允许用户输入的标签上-->

    <div class="form-group well">
    <label for="firstItem">Set First Item</label>
    <input name="firstItem" class="form-control" ng-model="todos[0].action" />
    </div>
    </div>
    <script type="text/javascript">
    angular.module("exampleApp",[])
    .controller("defaultCtrl",function($scope){
    $scope.todos=[
    {action:"get groceries",complete:false},
    {action:"call number",complete:true},
    {action:"buy shoes",complete:true},
    {action:"buy flower",complete:false},
    {action:"play",complete:true}
    ]
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    Windows系统环境变量path优先级测试报告
    URI和URL的区别
    智能引导式报错(Class file name must end with .class)
    【Algorithm】冒泡排序
    【C语言】练习2-9
    【C语言】练习2-8
    【C语言】练习2-1
    【C语言】练习1-23
    【C语言】练习1-22
    【C语言】练习1-21
  • 原文地址:https://www.cnblogs.com/debra/p/6363166.html
Copyright © 2011-2022 走看看