AngularJS如何拼接多个输入框内容？

嗨，作为AngularJS新手，你这个拼接多个输入框内容的需求其实很好解决～我给你两种实用的方案，都能完美适配任意数量的输入框：

这种方式适合在控制器内直接处理逻辑，当输入框内容变化时自动更新拼接结果：

function MyController($scope) {
  $scope.fields = {
    test: [{value: "aaa"}, {value:"bbb"}, {value:"ccc"}]
  };

  // 初始化拼接结果
  $scope.concatenatedText = $scope.fields.test.map(item => item.value).join('');

  // 深度监听数组及内部对象的变化
  $scope.$watch('fields.test', function(newFields) {
    if (newFields) {
      // 遍历数组，提取每个输入框的value并拼接
      $scope.concatenatedText = newFields.map(item => item.value || '').join('');
    }
  }, true); // 第三个参数`true`表示深度监听，确保修改输入框内容时能触发更新
}

对应的HTML只需添加显示拼接结果的元素：

<div ng-app ng-controller="MyController">
  <ul>
    <li ng-repeat="field in fields.test">
      <input type="text" ng-model="field.value">
    </li>
  </ul>
  <h3>拼接结果：</h3>
  <p>{{concatenatedText}}</p>
  <pre>{{fields}}</pre>
</div>

如果后续其他地方也需要类似的拼接逻辑，自定义过滤器是更好的选择，它能灵活处理任意数组和属性：

// 先定义一个AngularJS模块（比全局控制器更规范）
angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.fields = {
      test: [{value: "aaa"}, {value:"bbb"}, {value:"ccc"}]
    };
  })
  // 自定义过滤器，用于拼接数组对象的指定属性值
  .filter('concatValues', function() {
    return function(array, propName) {
      // 先判断是否为有效数组
      if (!Array.isArray(array)) return '';
      // 遍历数组，提取属性值并拼接
      return array.map(item => item[propName] || '').join('');
    };
  });

HTML中直接使用过滤器即可，无需额外控制器逻辑：

<div ng-app="myApp" ng-controller="MyController">
  <ul>
    <li ng-repeat="field in fields.test">
      <input type="text" ng-model="field.value">
    </li>
  </ul>
  <h3>拼接结果：</h3>
  <!-- 传入数组和要拼接的属性名`value` -->
  <p>{{fields.test | concatValues:'value'}}</p>
  <pre>{{fields}}</pre>
</div>

关键说明 #

• 两种方案都支持任意数量的输入框：不管你往fields.test数组里添加多少个{value: ''}对象，都会自动参与拼接。
• 方案二中的过滤器可以在任何需要拼接数组属性的地方复用，非常灵活。

内容的提问来源于stack exchange，提问作者Rickin Rathatha