AngularJS過濾器不會同步來自模塊的輸入值

您好，我是AngularJS的新手，遇到了一個問題。我需要創建一個自定義過濾器來過濾字符串，但是過濾器無法同步輸入結果。因爲filter.js必須被製作成一個單獨的JS文件，我想我必須從controller.js導入$ scope.delimiter到filter.js，但我不知道該怎麼做。先進的非常感謝。 HTML：AngularJS過濾器不會同步來自模塊的輸入值

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Tokenizer Filter</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="controller.js"></script> 
    <script src="filter.js"></script> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="TokenizeControler"> 
     <p>Input: <input ng-model="greeting" /></p> 
     <p>Delimiter: <input id="delimiter" ng-model="delimiter" /></p> 
     <p>{{delimiter}}</p> 
     <p>{{greeting | tokenize: defualt}}</p> 
     <p>{{greeting | tokenize}}</p> 
    </div> 
</body> 
</html>

Controller.js：

var myApp = angular 
    .module("myApp", []) 
    .controller("TokenizeControler", 
     function ($scope) { 
      $scope.greeting = "Angular is awesome"; 
      $scope.delimiter = "#"; 
      $scope.defualt = true; 

    });

filter.js：

myApp.filter("tokenize", function() { 
    return function (content, defualt) { 
      if (angular.isString(content)) { 
       var noSpace, output; 
       noSpace = content.replace(/ +/g, ""); 
       if (defualt) { 
        return output = noSpace.split('').join(',') + " (Default)"; 
       } else { 
        delimiter = document.getElementById('delimiter').value; 

        return output = noSpace.split('').join(delimiter) + "(With option)"; 
        } 
      } else { 
       return content; 
      } 
     }; 
    });

來源

2016-07-26 Zichen Ma

讓我把它直。你要刪除字符串中有一個或多個空格的空間的所有實例，然後將它們拆分成沒有空格的地方？ –

檢查此問題（http://stackoverflow.com/questions/26650656/angularjs-access-scope-from-controller-in-custom-filter）我相信它會很有用。 –

實際上，我需要在輸入字段中用分隔符字段中的分隔符分隔字符串。例如，默認情況下，輸入字段是：「角度很棒」，如果分隔符是「＃」，我需要將它變成：「＃A＃＃＃＃＃＃w＃e＃s＃o＃m＃e「 –

看到這個plunker：https://plnkr.co/edit/kXQGTj1sABKOuxObOhn7?p=preview。

默認是不需要的，只是檢查，如果分隔符是存在

filter("tokenize", function() { 
return function (content, delimiter) { 
     if (angular.isString(content)) { 
      return content 
         .replace(/ +/g, "") 
         .split('') 
         .join(delimiter || ','); 
     } else { 
      return content; 
     } 
    }; 
})

而且使用

<p>{{delimiter}}</p> 
<p>{{greeting | tokenize}}</p> 
<p>{{greeting | tokenize:delimiter}}</p>

來源

2016-07-26 05:43:26 Silvinus

謝謝Silvinus，這就是我想要的！ –

試試這個，它的工作http://plnkr.co/edit/VFOEADpoWRq0E43GTXpn?p=preview

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Tokenizer Filter</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="controller.js"></script> 
    <script src="filter.js"></script> 
</head> 

<body ng-app="myApp"> 
    <div ng-controller="TokenizeControler"> 
     <p>Input: <input ng-model="greeting" /></p> 
     <p>Delimiter: <input id="delimiter" ng-model="delimiter" /></p> 
     <p>{{delimiter}}</p> 
     <p>{{greeting | tokenize: defualt}}</p> 
     <p>{{greeting | tokenize:false:delimiter}}</p> 
    </div> 
</body> 

</html>

個controller.js

var myApp = angular 
    .module("myApp", []) 
    .controller("TokenizeControler", 
     function($scope) { 
      $scope.greeting = "Angular is awesome"; 
      $scope.delimiter = "#"; 
      $scope.defualt = true; 
     });

filter.js

myApp.filter("tokenize", function() { 
    return function(content, defualt, delim) { 
     if (angular.isString(content)) { 
      var noSpace, output; 
      noSpace = content.replace(/ +/g, ""); 
      if (defualt) { 
       return output = noSpace.split('').join(',') + " (Default)"; 
      } else { 
       delimiter = delim; //document.getElementById('delimiter').value; 
       return output = noSpace.split('').join(delimiter) + "(With option)"; 
      } 
     } else { 
      return content; 
     } 
    }; 
});

來源

2016-07-26 05:44:04

謝謝Rejs，那正是我所需要的，請問：

{{greeting | tokenize：false：delimiter} }

，這是什麼意思？ –

我在這裏默認爲false，第一個過濾器，默認爲真.. –

我現在看到了，非常感謝！ –

檢查這個plunkr我認爲這是你需要什麼，對不對？

myApp.filter("tokenize", function() { 
    return function (content, delimiter) { 
      if (angular.isString(content)) { 
       var noSpace, output; 
       noSpace = content.replace(/ +/g, ""); 
       if (delimiter) { 
        return output = noSpace.split('').join(delimiter) + " (Default)"; 
       } else { 
        delimiter = "#"; 

        return output = noSpace.split('').join(delimiter) + "(With option)"; 
        } 
      } else { 
       return content; 
      } 
     }; 
    });

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Tokenizer Filter</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="controller.js"></script> 
    <script src="filter.js"></script> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="TokenizeControler"> 
     <p>Input: <input ng-model="greeting" /></p> 
     <p>Delimiter: <input id="delimiter" ng-model="delimiter" /></p> 
     <p>{{delimiter}}</p> 
     <p>{{greeting | tokenize}}</p> 
     <p>{{greeting | tokenize: delimiter}}</p> 
    </div> 
</body> 
</html>

來源

2016-07-26 05:46:23

謝謝Mridul，！這就是我想要的。 –

AngularJS過濾器不會同步來自模塊的輸入值

回答

相關問題