[angularjs] angularjs系列笔记八事件

AngularJs

ng-click

ng-click

<div class="cnblogs_code">

  
    
  <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;ng-controller</span><span style="color: #0000ff;"&gt;="ngClickTest"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
    测试ng-click指令
    </span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;ng-click</span><span style="color: #0000ff;"&gt;="count=count+1"</span><span style="color: #0000ff;"&gt;></span>点击<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
    {{count}}
  </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>

<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #0000ff;">>
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">实例化应用对象,参数:模块名,空数组
<span style="background-color: #f5f5f5; color: #0000ff;">var<span style="background-color: #f5f5f5; color: #000000;"> app<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">angular.module(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">Home<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,[]);
app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">ngClickTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){})
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>

ng-click指令结合ng-hide显示隐藏html

给ng-click指令绑定一个函数,给ng-hide指令赋值一个变量,在控制器中分配默认变量和分配函数

  <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;ng-controller</span><span style="color: #0000ff;"&gt;="ngClickTest"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
    测试ng-click指令
    </span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;ng-click</span><span style="color: #0000ff;"&gt;="toggle()"</span><span style="color: #0000ff;"&gt;></span>点击<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;ng-hide</span><span style="color: #0000ff;"&gt;="flag"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
        姓名:{{name}}
    </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
  <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>

<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #0000ff;">>
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">实例化应用对象,参数:模块名,空数组
<span style="background-color: #f5f5f5; color: #0000ff;">var<span style="background-color: #f5f5f5; color: #000000;"> app<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">angular.module(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">Home<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,[]);
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">调用app对象的controller方法,参数:控制器名,匿名函数
<span style="background-color: #f5f5f5; color: #000000;"> app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">ngClickTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">($scope){
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">分配变量
<span style="background-color: #f5f5f5; color: #000000;"> $scope.name<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">陶士涵<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">;
$scope.flag<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #0000ff;">false<span style="background-color: #f5f5f5; color: #000000;">;
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">分配过去一个函数
<span style="background-color: #f5f5f5; color: #000000;"> $scope.toggle<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">函数起到的作用
<span style="background-color: #f5f5f5; color: #000000;"> $scope.flag<span style="background-color: #f5f5f5; color: #000000;">=!<span style="background-color: #f5f5f5; color: #000000;">$scope.flag;
}
})
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...