Как установить комбинированную максимальную длину двух полей ввода в угловом

Question

Я хочу установить общую максимальную длину 64 для двух полей ввода в угловом, поэтому, если скажем, что для первого поля пользователь вводит 40 символов, в второе поле MaxLength становится 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