Angular.js kopieren Werte in Zeile von Textfeld Array

Ich habe eine Reihe von Eingabetextfeldern. Ich möchte die folgende Funktionalität einbringen.Angular.js kopieren Werte in Zeile von Textfeld Array

a) Wenn ich einen Wert in die erste Eingabe eingabe, sollte der Wert automatisch kopiert/aktualisiert werden zu nächsten alle Textfelder. dh zu 2 bis 10

b) Angenommen, ich gebe einen Wert in der 5. Box ein, muss der Wert automatisch auf 6, 7,8,9,10, aber nicht auf 4,3,2,1 kopiert/aktualisiert werden .

Wie & Was ist der einfachste Weg, dies in angular.js zu erreichen?

Sample Row

Quelle

2016-07-16 Prasath

Bitte zeigen Sie den Code, den Sie versucht haben! – Iceman

den Wert in ngChange Erhalten und die nachfolgenden Eingabewerte aktualisieren. Beispiel unten.

angular 
 
    .module('exampleApp', []) 
 
    .controller('ExampleController', ExampleController); 
 

 
function ExampleController() { 
 
    var vm = this; 
 
    vm.inputValues = [ 
 
    [1, 2, 3, 4], 
 
    [1, 2, 3, 4], 
 
    [1, 2, 3, 4], 
 
    [1, 2, 3, 4] 
 
    ]; 
 
    vm.updateSubsequentInputs = function(idx, row, value) { 
 
    for (var i = idx; i < row.length; i++) { 
 
     row[i] = value; 
 
    } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="ExampleController as vm"> 
 
    <table> 
 
    <tr ng-repeat="inputRow in vm.inputValues"> 
 
     <td ng-repeat="inputValue in inputRow track by $index"> 
 
     <input ng-model="inputValue" ng-change="vm.updateSubsequentInputs($index, inputRow, inputValue)"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

Quelle

2016-07-16 06:03:21 ScottL

Vielen Dank für die Freigabe des Codes. Perfekt funktioniert. Das Aktualisieren des Arrays in einer for-Schleife funktioniert, wenn es sich um eine einzelne Zeile handelt. Ich habe mehrere Zeilen (etwa 40) mit der gleichen Funktion. Daher sollte der Wert nur für diese bestimmte Zeile und nicht für alle aktualisiert werden. Ich versuche, die Logik zu ändern, aber würde mich freuen, wenn Sie mir eine Idee dazu geben könnten. – Prasath

Siehe das aktualisierte Beispiel. Die Idee ist die gleiche, es verwendet nur mehrere Zeilen. – ScottL

Seine Arbeits, versuchen Sie es

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    
 
    $scope.myNumbers = [ {value: 1,index: 1}, {value: 2,index: 2}, {value: 3,index: 3}, {value: 4,index: 4}, {value: 5,index: 5}, {value: 6,index: 6}, {value: 7,index: 7}, {value: 8,index: 8} ]; 
 
    
 
    
 
    
 
$scope.testFn=function(val,ind){ 
 
    
 
    for (var i in $scope.myNumbers) { 
 
     
 
    if ($scope.myNumbers[i].index > ind) { 
 
     
 
     $scope.myNumbers[i].value = val; 
 
    } 
 
    } 
 
     
 
} 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <body ng-app="plunker" ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    
 
    <div ng-repeat="num in myNumbers"> 
 
    <input type="text" ng-model="num.value" ng-change="testFn(num.value,num.index)"> 
 
    </div> 
 
    
 
    </body>

Quelle

2016-07-16 06:19:11

Hier ist eine Reiniger Version:

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
     $scope.values = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
 
     $scope.change = function(index) { 
 
     $scope.values = $scope.values.slice(0, index).concat(Array($scope.values.length - index).fill($scope.values[index])); 
 
     } 
 
    }); 
 
})();

<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <table> 
 
    <tr> 
 
     <td ng-repeat="value in values track by $index"> 
 
     <input type="text" size="1" ng-model="values[$index]" ng-change="change($index)"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

Quelle

2016-07-16 06:31:22 developer033

Angular.js kopieren Werte in Zeile von Textfeld Array

Antwort

Verwandte Themen