对象返回数组值逗号分隔的HTML输入字段 [英] Returned array of objects values comma-seperated in html input field

问题描述

我要显示在输入字段的HTML逗号分隔值。
结果：第一个值，第二值，第三值。
值以 selectedItems 指令（自定义指令按钮）的隔离范围返回。

I want to display comma separated values in input field html. Result: First Value, Second Value, Third Value. Values are returned in isolated scope of directive (custom-directive-button) as 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看起来是这样的：

Returned object "selectedItems" looks like this:

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

是否有可能以某种方式与角度JS（过滤器），或者用jQuery来实现它。

Is it possible to achieve it somehow with Angular JS (filter) or with JQuery.

其它的要求是具有此功能两者的方法。
因此，如果用户将输入的东西到输入字段，它会自动更新以及 selectedItems 与类型化 attrValue，和＆lt; NA＆GT;为说明。

Other requirement is to have this functionality both way. So if user will type something into the input field, it will automatically update as well selectedItems with typed attrValue, and <NA> as description.

感谢。

推荐答案

忘了补充回答：

我已经创建了独立的指令attrFormatter，其中方法ngModel.formatters被照顾分析和格式化值逗号分隔的结果，ngModel.parsers正在做同样的事情，但反之亦然。

I have created separate directive attrFormatter, where methods ngModel.formatters is taking care to parse and format values to comma separated result and ngModel.parsers is doing same thing but vice versa.

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：

Then you just need to add your directive tag into your html:

{
＆LT; attr指示-NG格式化模型=neededItems/＆GT;
}

NeededItems是返回值的数组将被解析。

NeededItems is an array of returned values to be parsed.

这篇关于对象返回数组值逗号分隔的HTML输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！