做一个内容网站多少钱,网站开发的质量标准,昌平电子网站建设,网站开发常用字体MVC模式的清单列表效果 使用WebStorm新建todo.html并链入bootstrap.css、bootstrap-theme.css、angular.js。要链入的相关css和js文件预先准备好#xff0c;文件目录如下#xff1a; 使用MVC模式前的代码#xff1a; !DOCTYPE html
html ng-app
head文件目录如下 使用MVC模式前的代码 !DOCTYPE html
html ng-app
head meta charsetUTF-8 titleTO DO List/title link href./bootstrap/css/bootstrap.css relstylesheet/ link href./bootstrap/css/bootstrap-theme.css relstylesheet/ /head body div classpage-header h1Yimis TO DO List/h1 /div div classpanel div classinput-group input classform-control/ span classinput-group-btn button classbtn btn-defaultAdd/button /span /div table classtable table-striped thead tr thDescription/th thDone/th /tr /thead tbody trtd练车/tdtdYes/td/tr trtd看课外书/tdtdNo/td/tr /tbody /table /div /body /html 使用MVC模式后代码如下 !DOCTYPE html
html ng-apptodoApp head meta charsetUTF-8 titleTO DO List/title link href./bootstrap/css/bootstrap.css relstylesheet/ link href./bootstrap/css/bootstrap-theme.css relstylesheet/ script src./angularJs/angular.js/script script var model { user:Yimi, items:[{action:练车,done:true}, {action:看课外书,done:false}] }; var todoApp angular.module(todoApp,[]); todoApp.controller(ToDoCtrl,function($scope){ //以$开头的变量名表示AngularJS的内置特性 $scope.todo model; }); /script /head body ng-controllerToDoCtrl div classpage-header h1{{todo.user}}s TO DO List/h1 span classlabel label-default{{todo.items.length}}/span /div div classpanel div classinput-group input classform-control/ span classinput-group-btn button classbtn btn-defaultAdd/button /span /div table classtable table-striped thead tr thDescription/th thDone/th /tr /thead tbody tr ng-repeatitem in todo.items td{{item.action}}/td td{{item.done}}/td /tr /tbody /table /div /body /html 效果图如下 使用Chrome浏览器查看 模型-视图-控制器(MVC) M:模型。程序中的数据 ......
var model {user:Yimi,items:[{action:练车,done:true},{action:看课外书,done:false}]};
...... V:视图。显示数据的逻辑 比如在间通过{{和}}调用之前定义的模型的值 ......
h1{{todo.user}}s TO DO List/h1 span classlabel label-default{{todo.items.length}}/span ...... tr ng-repeatitem in todo.items td{{item.action}}/td td{{item.done}}/td /tr ...... C:控制器。对数据进行操作的逻辑 var todoApp angular.module(todoApp,[]);todoApp.controller(ToDoCtrl,function($scope){ //以$开头的变量名表示AngularJS的内置特性 $scope.todo model; }); body ng-controllerToDoCtrl 转载于:https://www.cnblogs.com/benmumu/p/9025130.html
