Is there a way to swap out multiple characters within a string when using ng-repeat in AngularJS?

Question

Is there a way to swap out multiple characters within a string when using ng-repeat in AngularJS?

How can I replace multiple characters in a string using ng-repeat in AngularJS?

I've tried the following code, but it's not working. I need to remove #, _, and . from the strings in my list. How can I achieve this in AngularJS?

<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Type a letter in the input field:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li type="1" ng-repeat="x in names | filter:test">
    {{ x.replace(/#|_/./g,'') }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [
        "Jana#ai.mkv",
        'Car.l.mkv',
        'Mar##gareth.mkv',
        'Hege.mkv',
        'Jo_e.mkv',
        'G__ustav.mkv',
        'Birgit.mkv',
        'Mary.mkv',
        'Kai.mkv'
    ];
});
</script>



</body>

javascript angularjs

Answer 1

Answer №1

To replace the # inside a function, you can create a function that applies the necessary logic.

EXAMPLE

angular.module('myApp', []).controller('namesCtrl', function($scope) {
   $scope.getText = function(obj){
    return obj.replace(/#|_|\./g, '');
  };
    $scope.names = [
        "Jana#ai.mkv",
        'Car.l.mkv',
        'Mar##gareth.mkv',
        'Hege.mkv',
        'Jo_e.mkv',
        'G__ustav.mkv',
        'Birgit.mkv',
        'Mary.mkv',
        'Kai.mkv'
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li type="1" ng-repeat="x in names | filter:test">
    {{ getText(x)  }}
  </li>
</ul>

</div>

Answer 2

To replace the # inside a function, you can create a function that applies the necessary logic.

EXAMPLE

angular.module('myApp', []).controller('namesCtrl', function($scope) {
   $scope.getText = function(obj){
    return obj.replace(/#|_|\./g, '');
  };
    $scope.names = [
        "Jana#ai.mkv",
        'Car.l.mkv',
        'Mar##gareth.mkv',
        'Hege.mkv',
        'Jo_e.mkv',
        'G__ustav.mkv',
        'Birgit.mkv',
        'Mary.mkv',
        'Kai.mkv'
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li type="1" ng-repeat="x in names | filter:test">
    {{ getText(x)  }}
  </li>
</ul>

</div>

Answer 3

Answer №2

Make sure to fix your regex first. It seems like it should be

/#|_|\./g

Create a function within the controller and utilize it in the mustache template. For example:

angular.module('App', [])
  .controller('Ctrl', function() {
    var vm = this;

    vm.names = [
      "Jana#ai.mkv",
      'Car.l.mkv',
      'Mar##gareth.mkv',
      'Hege.mkv',
      'Jo_e.mkv',
      'G__ustav.mkv',
      'Birgit.mkv',
      'Mary.mkv',
      'Kai.mkv'
    ];

    vm.replace = function(value) {
      return value.replace(/#|_|\./g, '');
    };
  });

<div ng-app="App" ng-controller="Ctrl as vm">
  <p>Enter a letter in the input field:</p>
  <p><input type="text" ng-model="test"></p>
  <ul>
    <li ng-repeat="x in vm.names | filter: test">
      {{ vm.replace(x) }}
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

Answer 4

Make sure to fix your regex first. It seems like it should be

/#|_|\./g

Create a function within the controller and utilize it in the mustache template. For example:

angular.module('App', [])
  .controller('Ctrl', function() {
    var vm = this;

    vm.names = [
      "Jana#ai.mkv",
      'Car.l.mkv',
      'Mar##gareth.mkv',
      'Hege.mkv',
      'Jo_e.mkv',
      'G__ustav.mkv',
      'Birgit.mkv',
      'Mary.mkv',
      'Kai.mkv'
    ];

    vm.replace = function(value) {
      return value.replace(/#|_|\./g, '');
    };
  });

<div ng-app="App" ng-controller="Ctrl as vm">
  <p>Enter a letter in the input field:</p>
  <p><input type="text" ng-model="test"></p>
  <ul>
    <li ng-repeat="x in vm.names | filter: test">
      {{ vm.replace(x) }}
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

Is there a way to swap out multiple characters within a string when using ng-repeat in AngularJS?

Answer №1

Answer №2

Similar questions

unable to retrieve the value from the scope

Guide on creating a conditional column in a kendo UI grid with the use of AngularJS

Enhance filtering capabilities in ng-repeat by adding controls

Adding Jade template variable to an inline function

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

Connecting different jQuery methods to create a chain

Tips for including assisting text in the date field with Material UI

Creating Objects on the Fly with Mistic Query Builder

Tips for verifying elements using the Loop technique in a JSON array

Switch between two fields using just one animation

Submitting a form from outside the form using a button in HTML: A step-by-step guide

Sending a PDF document to a function that specifically calls for a file location or URL

How can I display a "loading..." message as a temporary placeholder while waiting for my Apexcharts to load?

Tips for configuring jQtree to initially display the tree structure from the HTML source

Utilizing Vuex Store in Blade Template | Laravel and Vue.js

Guide to uploading multiple images to an Amazon AWS S3 bucket using Node.js, Angular, and JavaScript

Click a button to adjust the height of an element

creating an interactive table with the help of the useState hook

"Utilize jQuery's append method to dynamically add elements to the DOM and ensure

Looking for a solution to dynamically fill a list in JQuery with data from a JSON file. Any suggestions for troubleshooting?