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

Question

这与我的last topic (that has been already answered)有些相关，但就方法而言，这是完全不同的。

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

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>\
               ....
            ';
            ....
        }
    }
}

现在，我需要做的是 输入来自输入的插入所有类型的电子邮件 来自 < em>按钮的“data-list”属性。如下所示：

<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

方法1：拆分和加入：

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

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

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

调用

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

如果您确实需要更新，我建议您使用ng-change，其中一个示例是大纲in this post。特别注意去抖功能，它会限制此频率的发生频率。

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
}

此事的兴趣也可能是表现。此链接将测试不同的方法。正则表达式在这里赢得了表现。

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

Answer 2

使用global替换

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