在ng-model上使用$ scope時，輸入長度不確定

我是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;

來源

2017-04-05 Shaz

錯誤的括號：（$範圍。 EXP lorationObjectiveService.displayed.length）; – Groben

圓括號不會影響任何內容@Groben – taguenizy

添加指令腳本 –

檢查這個sinppest 5可以幫助你....

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="[email protected]" 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>

來源

2017-04-05 10:12:53

儘管此代碼可能有助於解決問題，但它並不能解釋_why_和/或_how_它是如何回答問題的。提供這種附加背景將顯着提高其長期價值。請[編輯]您的答案以添加解釋，包括適用的限制和假設。 –

在ng-model上使用$ scope時，輸入長度不確定

回答

相關問題