在 html 输入字段中返回以逗号分隔的对象值数组答案

【问题标题】：Returned array of objects values comma-seperated in html input field在 html 输入字段中返回以逗号分隔的对象值数组
【发布时间】：2015-07-08 14:18:14
【问题描述】：

我想在输入字段 html 中显示逗号分隔值。结果：First Value, Second Value, Third Value。值在指令（自定义指令按钮）的隔离范围内返回为selectedItems。

html中的输入部分：

<div class="row">
  <div class="input-group">
    <input type="text" class="form-control" ng-model="selected" />
    <span class="input-group-btn">
      <button class="btn btn-default" selected-items = "appModel.selectedItems" custom-directive-button>!</button>
    </span>
  </div>
  <ul>
    <li ng-repeat="item in appModel.selectedItems">{{ item.attrValue }}</li>
  </ul>
</div>

返回的对象“selectedItems”如下所示：

[{"attrValue": "First Value","descText": "First Value in array"},{"attrValue": "Second Value","descText": "Second Value in array"},{"attrValue": "Third Value","descText": "Third Value in array"}]

是否可以使用 Angular JS（过滤器）或 JQuery 以某种方式实现它。

其他要求是双向都具有此功能。因此，如果用户在输入字段中输入内容，它也会自动更新 selectedItems 并输入 attrValue, and <NA> as description。

谢谢。

【问题讨论】：

我想在控制器转换器中做，然后通过隔离范围传递已经用逗号分隔的值comma-separated-value=appModel.commaSeparatedValue，然后我可以使用ng-model=commaSeparatedValue 绑定到输入字段。但是这个解决方案在我看来不是一个好主意，因为我需要让用户在输入字段中输入新值——它也可以以其他方式工作。在这种情况下，我将需要创建其他转换器，它将采用逗号分隔值并从中创建对象数组。谢谢

标签： javascript jquery angularjs

【解决方案1】：

忘记添加答案：

我创建了单独的指令 attrFormatter，其中方法 ngModel.formatters 负责将值解析和格式化为逗号分隔的结果，而 ngModel.parsers 也在做同样的事情，反之亦然。

angular.module('modul').directive('attrFormatter', attrFormatter);

  function attrFormatter() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {

            ngModel.$formatters.push(function (inputValues) {
                var formattedValues = [];

                if (angular.isArray(inputValues)) {
                    for (var i = 0; i < inputValues.length; i++) {
                        formattedValues.push(inputValues[i].neededValue);
                    }
                    return formattedValues.join(',').toUpperCase();
                }
                return inputValues;
            });


            ngModel.$parsers.push(function (value) {
                return (value || '').split(',').map(function (selValues) {
                    return selValues.trim();
                });
            });
        }
    }
};

}

然后你只需要将你的指令标签添加到你的 html 中：

{ <attr-formatter ng-model="neededItems"/> }

NeededItems 是要解析的返回值数组。

【讨论】：