输入长度在ng-model上使用$ scope时未定义

时间:2017-04-05 10:08:10

标签: angularjs

我是Angular JS的新手。但是,找不到单线或简单的解决方案。 我正在尝试在输入文本框中实现“剩余字符数”,但explorationObjectiveService.displayed的值为undefined。帮助赞赏。

HTML

<input id="explorationObjective" type="text"
                   class="form-control protractor-test-exploration-objective-input"
                   ng-model="explorationObjectiveService.displayed"
                   ng-blur="saveExplorationObjective()" placeholder="Learn how to ..." maxlength="100">

指令JS

$scope.counter= 100 - ($scope.explorationObjectiveService.displayed).length;

1 个答案:

答案 0 :(得分:1)

检查这个罪孽可能对你有帮助....

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.num=100;
  $scope.change = function(){
    $scope.num=100-$scope.data.length
  };
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <input id="explorationObjective" type="text"
                   class="form-control protractor-test-exploration-objective-input"
                   ng-model="data"
                   ng-change="change()" placeholder="Learn how to ..." maxlength="100">
                   <p>remained: {{num }}chars</p>
  </body>

</html>