记录小白前端成长03

来源：互联网发布：物联网编程技术编辑：程序博客网时间：2024/05/16 19:01

Angular 笔记： →作为一个前端，对于MVC框架无理由不去研究！

①html中声明指令管理边界 <html ng-app=”myApp”>

②指定位置 <div ng-controller="mytask">

③ng-modle="task" //数据绑定(实时显示)

例： <input ng-modle="task">

④ ng-click="add()"

// function firstangular($scope){ $scope.add=function(){ }}

⑤ ng-if="tasks.length>0" //根据列表数据显示或隐藏

⑥ ng-repeat="x in names"

//<ul ng-init="names=['Jani','Hege','Kai']"><li ng-repeat="x in names">{{x}}</li>

⑦ 自定义指令 <flyFast></flyFast> //var app=angular.module();

app.directive("flyFast",function(){

return {

template:"<h1>自定义指令</h1>"

}

})

**************************刚开始有点乱************************

这里附上一些代码

<!DOCTYPE html><html lang="en" ng-app="todoList"><head>    <meta charset="UTF-8">    <title>angular-demo1</title>    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></head><body ng-controller="TaskCtrl">    <div class="input-group" ng-init="firstName=John;quanity=3;count=8">    <p><input type="text " ng-model="firstName "></p>    <p>你输入的为:{{firstName}}</p><input ng-model="task " type="text" class="form-control"><span class="input-group-btn "><button class="btn btn-default " ng-click="add() ">提交</button></span>        <h4 ng-hide="tasks.length==0 ">任务列表</h4>        <ul class=" ">        <li ng-repeat="item in tasks track by $index " class="list-group-item ">{{item}}             <a ng-click="tasks.splice($index,1) ">删除</a>        </li>        </ul>        <p>质量:<input type="number" ng-model="quanity"></p>         <p>数量:<input type="number" ng-model="count"></p>         <p>共计：{{quanity*count}}</p></div><div ng-init="names=[{name:'cai',country:'cei'},{name:'coi',country:'cto'},{name:'cop',country:'cur'}]"><ul><li ng-repeat="x in names">{{x.name+','+x.country}}</li></ul></div><div><input name="fitname" type="text" ng-model="fitName" required><input name="lastname" type="text" ng-model="lastName" required><input name="email" type="email" ng-model="email" required><button ng-click="reset()">重置</button></div><script src="js/angular.min.js"></script><script> angular.module('todoList',[]) .controller('TaskCtrl',function($scope){ $scope.task=" "; $scope.tasks=[]; $scope.add=function(){ $scope.tasks.push($scope.task); } $scope.reset=function(){ $scope.fitName="Mahesh"; $scope.lastName="Parashar"; $scope.email="MaheshParashar@yilishabai.com"; }   $scope.reset(); })</script></body></html>

0 0