Angularjs 控制器

来源：互联网发布：随意画线软件编辑：程序博客网时间：2024/04/30 00:11

<!DOCTYPE html><html><head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <head> <body><div ng-app="" ng-controller="personController">名: <input type="text" ng-model="person.firstName"><br/>姓: <input type="text" ng-model="person.lastName"><br/><br/>姓名: {{person.firstName + " " + person.lastName}}</div><script>function personController($scope) {    $scope.person = {        firstName: "Shawn",        lastName: "Dong"    };}</script><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></body></html>

这里写图片描述

进一步

<!DOCTYPE html><html><head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <head> <body><div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{person.fullName()}}</div><script>function personController($scope) {    $scope.person = {        firstName: "Shawn",        lastName: "Dong",        fullName: function() {            var x;            x = $scope.person;            return x.firstName + " " + x.lastName;        }    };}</script><script>src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></body></html>

带有方法的控制器

<!DOCTYPE html><html><head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <head> <body><div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{fullName()}}</div><script>function personController($scope) {    $scope.person = {        firstName: "Shawn",        lastName: "Dong",     };     $scope.fullName = function() {         var x;         x = $scope.person;          return x.firstName + " " + x.lastName;     };}</script><script>src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></body></html>

进一步
test.html

<div ng-app="" ng-controller="namesController"><ul>  <li ng-repeat="x in names">    {{ x.name + ', ' + x.country }}  </li></ul></div><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script><script src="test.js"></script>

test.js

function namesController($scope) {    $scope.names = [        {name:'11',country:'c1'},        {name:'22',country:'c2'},        {name:'33',country:'c3'}    ];}

0 0