角度.js复制文本框数组行中的值

Angular.js copy values in row of textbox array

本文关键字：数组 js 复制 文本 角度      更新时间：2023-09-26

我有一行输入文本框。我想引入以下功能。

a） 如果我在第一个输入中输入一个值，该值应该会自动复制/更新到下一个所有文本框。即 2 到 10

b） 假设我在第 5 个框中输入/更新一个值，该值必须自动复制/更新为 6、7,8、9、10，而不是 4,3,2,1。

在 Angular.js 中如何以及实现这一目标的最简单方法是什么？

示例行

获取 ngChange 中的值并更新后续输入值。下面是示例。

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>

它的工作，试试吧

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>

这是一个更干净的版本：

(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>

相关文章：