在AngularJS中有关于MVC的复杂操作
程序员文章站
2022-04-08 14:23:57
...
下面我就为大家分享一篇AngularJS基于MVC的复杂操作实例讲解,具有很好的参考价值,希望对大家有所帮助。
实例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS基于MVC的复杂操作案例</title> <script type="text/javascript" src="../js/angular.min.js"></script> </head> <body> <!--ng-app="myapp"定义了一个模块--> <p ng-app="myapp" ng-controller="myctrl"> <p> <!--ng-model模型作用--> <input type="text" name="name" ng-model="name" /> <!--提供按钮--> <input type="button" value="清空" ng-click="clearVal()" /> </p> <p> <!--{{}}等价于ng-bind用于数据显示--> hello,{{name}} </p> </p> </body> <script type="text/javascript"> //初始化myapp模块 var myapp = angular.module("myapp",[]); //定义模块的控制器 //依赖注入,$scope作用域对象,操作当前作用域视图 myapp.controller("myctrl",["$scope",function($scope){ //对模型进行初始化赋值 $scope.name = "你我他学习吧"; //在作用域提供clearVal点击事件 $scope.clearVal = function(){ //模型设置为空 $scope.name = "";//清空输入框内容 } }]); </script> </html>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在react-router中如何使用history控制路由(详细教程)
在webpack中有关vue项目资源文件报404问题(详细教程)
以上就是在AngularJS中有关于MVC的复杂操作的详细内容,更多请关注其它相关文章!