zoukankan      html  css  js  c++  java
  • AngularJS的一点学习笔记

      ng-options="item.action for item in todos"

      ng-options表达式的基本形式, 形如 "<标签> for <项目> in <数组>

      <option value="">(chosse one) </option>

      ng-options="item.id as item.action for item in todos"

      在表单的形式如<所选属性>as <标签> for <变量> in <数组>

      ng-options="item.action group by item.place for item in todos" 

      将对象进行分组

      使用无作用域的控制器

      

     1 <!DOCTYPE html>
     2 <html lang="en" ng-app="iApp">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
     7     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
     8     <script src="bower_components/angular/angular.js"></script>
     9     <script>
    10         angular.module('iApp',[])
    11             .controller('topCtrl',function(){
    12                 this.dataValue='Hello,Adam';
    13                 this.reverseText=function(){
    14                     this.dataValue=this.dataValue.split("").reverse().join("");
    15                 }
    16             })
    17     </script>
    18 </head>
    19 <body >
    20     <div class="well" ng-controller="topCtrl as ctrl">
    21         <h4>Top level Controller</h4>
    22         <div class="input-group">
    23             <span class="input-group-btn">
    24                 <button class="btn btn-default" ng-click="ctrl.reverseText()">Reverse</button>
    25             </span>
    26             <input type="text" class="form-control" ng-model="ctrl.dataValue">
    27         </div>
    28     </div>    
    29 </body>
    30 </html>

    当应用无作域的控制器时,表达式的格式化形如:<要应用的控制器> as <变量名>

    然后在视图中使用ctrl变量访问数据和行为,类似这样:<input.....ng-model="ctrl.dataValue">

  • 相关阅读:
    echarts x轴文字显示不全(解决方案)
    公共文件模块include
    个人tools封装
    echart改变legend样式及分页
    【学习笔记】tensorflow图片读取
    【学习笔记】tensorflow文件读取
    《简约之美:软件设计之道》总结
    【学习笔记】tensorflow队列和线程
    【学习笔记】tensorflow实现一个简单的线性回归
    【学习笔记】tensorflow基础
  • 原文地址:https://www.cnblogs.com/thomaspha/p/6147031.html
Copyright © 2011-2022 走看看