Question

我想在输入字段html中显示逗号分隔值。结果：First Value, Second Value, Third Value。值在隔离的指令范围（custom-directive-button）中返回为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>

返回的对象＆＃34; selectedItems＆＃34;看起来像这样：

[{"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。

感谢。

Answer 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是要解析的返回值数组。

返回的对象数组值在逗号输入字段

1 个答案: