How to use AngularJS controller? Introduction to angularjs controllers and filters

This article introduces the use of angularjs controller, as well as some introduction to the use of angularjs filter. Let us take a look at this article together

AngularJS Controller

AngularJS Controller Controls the data of an AngularJS application.
AngularJS controller is a regular JavaScript object

<h2>AngularJS 控制器属性</h2><p ng-app="" ng-controller="MyController">
   <p>姓名：<input type="text" ng-model="person.name"></p>
    <p>性别： <input type="text" ng-model="person.sex"></p>
    <p>信息： {{person.info()}}  </p></p><script type="text/javascript">
    function MyController($scope){
        $scope.person = {
            name:"LanFeng",
            sex:"女",
            info:function(){
                var x;
                x = $scope.person;                return x.name + " "+ x.sex;
            }
        }
    }</script><h2>AngularJS 控制器方法</h2><p ng-app="" ng-controller="MyController">
    <p>姓名：<input type="text" ng-model="person.name"></p>
    <p>性别： <input type="text" ng-model="person.sex"></p>
    <p>信息： {{info()}}  </p></p><script type="text/javascript">
    function MyController($scope){
        $scope.person = {
            name:"LanFeng",
            sex:"女"

        };
        $scope.info=function(){
            var x;
            x = $scope.person;            return x.name + " "+ x.sex;
        }
    }</script>

AngularJS filter

currency Format numbers into currency format.
filter Select a subset from array items.
lowercase Format strings to lowercase.
orderBy Arrange the array according to an expression.
uppercase Format string to uppercase.

Filters can be added to expressions via a pipe character (|) and a filter.

<h2>AngularJS 控制器方法</h2><p ng-app="" ng-controller="MyController">
    <p>姓名：<input type="text" ng-model="person.name"></p>
    <p>性别： <input type="text" ng-model="person.sex"></p>
    <p>信息： {{person.name | }}  </p></p><script type="text/javascript">
    function MyController($scope){
        $scope.person = {
            name:"LanFeng",
            sex:"女"

        }
    }</script>

rrree

The above is the detailed content of How to use AngularJS controller? Introduction to angularjs controllers and filters. For more information, please follow other related articles on the PHP Chinese website!