AngularJS - 从'ng-model'获取值然后过滤

Question

我有一个模式被加载到一个指令中，它有一个带有一些属性的按钮。

app.directive('dataFactoryModal', ['$compile', '$timeout', function($compile, $timeout) {
    return {
        scope: { .... }
        link: function (scope, element, attrs) {
            var html = '
               <input ng-model = "recipients" name = "email" type = "text" placeholder = "Enter email(s)" >\
               ....
               // Modal button section
               <button type = "button" class = "btn btn-primary" data-factory = "{{dataFactoryCodes}}" data-recipients = "">Submit</button>\
               ....
            ';
            ....
        }
    }
}

现在我需要从 "data-list 中的 输入（使用 ng-model 'Recipients'）插入所有键入的电子邮件 " 按钮的属性。

如下所示：

<button type = "button" class = "btn btn-primary" data-factory = "123;109;129" data-recipients = "meme@email.com;yayaya@email.com">Submit</button>

在输入收件人中，您可以键入多个电子邮件地址，但只能用逗号分隔。

当然，ng-model 可以提供帮助。所以...

<button type = "button" class = "btn btn-primary" data-factory = "{{dataFactoryCodes}}" data-recipients = "{{recipients}}">Submit</button>

但棘手的部分是用分号替换所有逗号。

到目前为止，我在指令中添加了 ff。但没有成功。

1. 直接替换过滤器

    scope.replaceCommas = function(value) {
       if (value!==undefined) {
          return value.replace(',', ';');
       }
    }
   

   然后调用属性内的函数，如：

    data-list = {{replaceCommas(recipients)}}
   

   结果：

    data-list = "email@email.com;email2@email.com,email3@email.com"
   

   它只是替换第一个逗号，而不是随后添加的电子邮件。

2. 我也尝试使用$watch，但没有成功。

    scope.$watch('recipients', function(newValue, oldValue) {
         scope.email = newValue;
   
         // if I did this, this would replace all commas with semicolons on the button attribute AND on the textfield
         scope.email = newValue.replace(',', ';');
   
         // if I did this, this would just replace only the first comma
         scope.emailTags = newValue.replace(',', ';');
    }
   

然后，在按钮上...

    data-list = {{emailTags}}

为什么这不起作用？

Answer 1

方法一：拆分加入：

拥有：var list = "email@email.com,email2@email.com,email3@email.com";

电话：list.split(',').join(';')

方法二：正则表达式：list.replace(/,/g,';')

调用

我建议不要使用观察者，并赞成创建一个将执行此操作的 submit() 函数？为什么？表现。必须注册观察者以查看值何时更改会产生额外的开销，并且您知道用户何时完成，因为他们会单击您的提交按钮。使用 watcher 方法，您很可能会多次运行替换函数。

如果您确实需要随时更新，我建议使用ng-change，其中一个示例是大纲in this post。请特别注意 debounce 功能，该功能将限制此触发的频率。

submit()函数方法：

<button type = "button" class = "btn btn-primary"
        data-factory = "{{dataFactoryCodes}}"
        data-recipients = "{{recipients}}"
        ng-click="submit()"> <!-- Add this -->
            Submit
</button>

然后，创建一个函数：

scope.submit = function(value) {
  // replace function here
}

对这个问题也感兴趣的可能是性能。此链接将测试不同的方法。 Regex 版本在性能方面胜出。

https://jsperf.com/split-join-vs-replace/2

Answer 2

使用global替换

scope.replaceCommas = function(value) {
  if (value!==undefined) {
       return value.replace(/,/g,";")
  }
}