AngularJs学习笔记-第一章-指令(2)

2019年9月15日 84次阅读 来源: MichaelDuan

续学习笔记(1)
12,controller指令

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>ngController demo</title>
</head>
<body>
<div ng-controller="ctrl">
  <label>姓名: <input type="text" ng-model="name"/></label><!--绑定name-->
  <button ng-click="greet()">打招呼</button><br/><!--点击click方法，打印出输出的名字,在js里面定义了greet方法-->
  联系方式:
  <ul>
    <li ng-repeat="contact in contacts">
      <select ng-model="contact.type">
         <option>phone</option>
         <option>email</option>
      </select>
      <input type="text" ng-model="contact.value" />
      <button ng-click="clear(contact)">清空</button>
      <button ng-click="remove(contact)">删除</button>
    </li>
    <li><button ng-click="add()">添加</button></li>
 </ul>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/submit.js"></script>
</html>

var APP = angular.module('app',[])
APP.controller('ctrl',['$scope',function($scope){
  $scope.name = "mike";
  $scope.contacts=[//定义数组
     {type:'phone',value:'123456'},
     {type:'email',value:'mike@qq.com'}
  ]
  $scope.greet = function(){
    alert($scope.name)//这里可以将输入的名字带出来
  }
  $scope.add = function(){//add方法
   $scope.contacts.push({type:'email',value:'huhao@qq.com'})
  }
  $scope.remove = function(paramContact){
    var i = $scope.contacts.indexOf(paramContact)//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
    $scope.contacts.splice(i,1)//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  }
  $scope.clear = function(contact){//清除方法
   contact.type = 'phone'
   contact.value=''//清空
  }
}])

函数方法:

$scope.remove = function(paramContact){
    var i = $scope.contacts.indexOf(paramContact)//indexOf() 方法可返回某个选定的字符串值在字符串中首次出现的位置,获取选定元素的位置
    $scope.contacts.splice(i,1)//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。i表示位置,1表示howmang
  }

代码如下:
《AngularJs学习笔记-第一章-指令(2)》
13,cut,copy,paste指令操作

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>ng demo</title>
</head>
<body ng-controller="ctrl">
<input ng-copy="copied=true" ng-init="copied=false;"  ng-model="value">
copied: {{copied}}<br/>
<input ng-cut="cut=true" ng-init="cut=false;" ng-model="value">
cut: {{cut}}<br/>
<input ng-paste="paste=true" ng-init="paste=false" ng-model="value">
pasted: {{paste}}
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP = angular.module('app',[])
    APP.controller('ctrl',['$scope',function($scope){
        $scope.value="mike"
    }])

《AngularJs学习笔记-第一章-指令(2)》
14,key down/press/up/event

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>ng demo</title>
</head>
<body ng-controller="ctrl">
<!--指令键盘操作-->
<input ng-keydown="count = count + 1" placeholder="keydown" ng-init="count=3">
key down count: {{count}}<br>
<input ng-keypress="count = count + 1" placeholder="keypress" ng-init="count=0">
key press count: {{count}}<br>
<input ng-keyup="count = count + 1" placeholder="keyup" ng-init="count=0"> key up count: {{count}}<br>
<input ng-keyup="event=$event" placeholder="keyup-event">
<p>event keyCode(获取每一个键的代码): {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>
</body>
<script src="js2/angular.js"></script>
</html>

页面显示如下:
《AngularJs学习笔记-第一章-指令(2)》
15,ngList
这个指令主要的作用是将字符串分隔符转换成数组的分隔符，默认的分隔符是逗号加一个空格，但是也可以通过ngList自己设置。下面的demo是”|”

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>ng demo</title>
</head>
<body ng-controller="ctrl">
   <textarea ng-model="list" ng-list="|" ng-trim="false"></textarea>
  <pre>{{ list | json }}</pre>//json是一个过滤器
</body>
<script src="js2/angular.js"></script>
</html>

页面显示如下:
《AngularJs学习笔记-第一章-指令(2)》

    原文作者：MichaelDuan
    原文地址: https://segmentfault.com/a/1190000003004348
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞