如何以角度設置兩個輸入字段的組合最大長度

Question

我想要爲角度中的兩個輸入字段設置組合最大長度爲64，因此如果說對於第一個字段用戶輸入40個字符，第二場的最大長度變爲24

到目前爲止，我曾嘗試寫的是這樣的...

JS

function newCat() { 
    var cat = { 
    id: $scope.id, 
    name: $scope.name 
    }; 

    $scope.idMax = 64 - ($scope.name) 
    $scope.nameMax = 64 - ($scope.id) 

    [irrelevant code] 

    return cat 
}; 

HTML

<div class="form-group"> 
    <h3>id</h3> 
    <input ng-maxlength="idMax" type="text" class="form-control" ng-model="id"> 
</div> 
<div class="form-group"> 
    <h3>Name</h3> 
    <input ng-maxlength="nameMax" type="text" class="form-control" ng-model="name"> 
</div> 

雖然這並沒有奏效。

任何人都可以建議如何解決我所做的事情，或者什麼是解決問題的更好方法？

Answer 1

做了一些代碼可以幫助你。

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

 
function MyCtrl($scope) { 
 
\t \t $scope.name=''; $scope.id=''; 
 
    var max = 10; 
 
    $scope.update = function() { 
 
    \t $scope.remaining = max - ($scope.name.length + $scope.id.length); 
 
    \t $scope.idMax = max - ($scope.name.length); 
 
    \t \t $scope.nameMax = max - ($scope.id.length); 
 
    } 
 
    $scope.update(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <h3>id</h3> 
 
    <input maxlength="{{idMax}}" type="text" ng-model="id" ng-change="update()"> Length: {{id.length}} 
 
    <h3>Name</h3> 
 
    <input maxlength="{{nameMax}}" type="text" ng-model="name" ng-change="update()"> Length: {{name.length}} 
 
    <p>Remaining: {{remaining}}</p> 
 
</div>

運行它，看看它是否是你所想要的目的。

Fiddle