Question

这是我的代码

的index.html

<html ng-app="myApp">
<head>
    <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
    <script src="app.js"></script>  
</head>
<body>
    <div ng-controller="mainController">
        <label>Who is your favorite player</label><br>
        <input type="text" ng-model="handle"/>
        <hr/>
        <h1>Favorite Player - {{ lchandle }}</h1>
    </div>
</body>

app.js

var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope' , '$filter' , function( $scope , $filter )
{

    $scope.handle = "";

    var tolower = function(){
        return $filter('lowercase')($scope.handle);
    }

    $scope.lchandle = tolower();

}]);

当我更改输入

时，最喜欢的玩家会更新

你能告诉我我做错了吗？

Answer 1

您可以通过为变量和变量

添加$ watch来实现此目的

<强>样本

var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter ) 
{
 $scope.$watch('handle', function() {
     $scope.handle =  $filter('lowercase')($scope.handle);

  });
 
   
}]);

<html ng-app="myApp">
<head>
    <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
    <script src="app.js"></script>  
</head>
<body>
    <div ng-controller="mainController">
        <label>Who is your favorite player</label><br>
        <input type="text" ng-model="handle"/>
        <hr/>
        <h1>Favorite Player - {{ handle }}</h1>
    </div>
</body>

Answer 2

基于previous answer by Sajeetharan我使用ng-change创建了版本，我认为这更容易理解，更多现代。

var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter ) 
{
 $scope.lowercase = function() {
     $scope.lhandle =  $filter('lowercase')($scope.handle);

  };
 
   
}]);

<html ng-app="myApp">
<head>
    <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
    <script src="app.js"></script>  
</head>
<body>
    <div ng-controller="mainController">
        <label>Who is your favorite player</label><br>
        <input type="text" ng-model="handle" ng-change="lowercase()"/>
        <hr/>
        <h1>Favorite Player - {{ lhandle }}</h1>
    </div>
</body>

Answer 3

在调用它之后，您需要传递一个函数实例，而不是它的结果。因此，请将其从$scope.lchandle = tolower();更改为$scope.lchandle = tolower;。

然后你可以用<h1>Favorite Player - {{ lchandle() }}</h1>

调用（执行）它

var myApp = angular.module("myApp", []);
var controller = myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
  $scope.handle = "";
  var tolower = function() {
    return $filter('lowercase')($scope.handle);
  }
  $scope.lchandle = tolower;
}]);

<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"></script>
</head>

<body>
  <div ng-controller="mainController">
    <label>Who is your favorite player</label><br>
    <input type="text" ng-model="handle" />
    <hr/>
    <h1>Favorite Player - {{ lchandle() }}</h1>
  </div>
</body>

除非您打算更改过滤器，否则我建议对过滤器使用不同的语法：

<h1>Favorite Player - {{ handle | lowercase }}</h1>

Angular js双向数据绑定功能

3 个答案: