前端开发

 首页 > 前端开发 > AngularJS > 简述AngularJS的控制器的使用_AngularJS_自学php网

简述AngularJS的控制器的使用_AngularJS_自学php网

分享到:
【字体:
导读:
          这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下...

 AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块,由控制器控制。

...

在这里,我们已经声明采用ng-controller指令的控制器studentController。作为下一步,我们将定义studentController如下

    
    
    
  •     studentController 定义 $scope 作为JavaScript对象参数。
  •     $scope 表示应用程序,使用studentController对象。
  •     $scope.student 是studentController对象的属性。
  •     firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
  •     fullName 是$scope.student对象的函数,它的任务是返回合并的名称。
  •     在fullName函数中,我们现在要学生对象返回组合的名字。
  •     作为一个说明,还可以定义控制器对象在单独的JS文件,并把有关文件中的HTML页面。
  • 现在可以使用ng-model或使用表达式如下使用studentController学生的属性。

      Enter first name: 
      Enter last name:

      You are entering: {{student.fullName()}}
    •     现在有 student.firstName 和 student.lastname 两个输入框。
    •     现在有 student.fullName()方法添加到HTML。
    •     现在,只要输入first name和lastname输入框中输入什么,可以看到两个名称自动更新。
    • 例子

      下面的例子将展示使用控制器。
      testAngularJS.html 文件内容如下:

      
      
      Angular JS Controller
      
      
      

      AngularJS Sample Application

      Enter first name:

      Enter last name:

      You are entering: {{student.fullName()}}

      输出

      在Web浏览器打开textAngularJS.html,看到以下结果:

      2015616120726250.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0 (679×365)

      分享到:
      AngularJS中的过滤器使用详解_AngularJS_...
      过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。  小写过滤器 添加小写的过滤器,使用管道符的表达式。在这里添加小写过滤器,以小写字母打印学生姓名。 Enter first name: Enter last name: Name in Upper Case: {{student.fullName() | lowercase}} ...
      详解AngularJS中的表达式使用_AngularJS_...
       表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。使用数字 Expense on Books : {{cost * quantity}} Rs 使用字符串 Hello {{student.firstname + " " + student....
      •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
      • 在这里……