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>

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure Your Forms Are Error-Free with Jquery Form Validation

Currently working on a registration form that involves the use of credit cards. I have reached the stage of form validation to ensure that users input correct data in the appropriate fields. However, this has led me to ponder whether relying on JQuery for ...

Having trouble with the JSON format within the 'operations' field in the formData of your Next.js application?

I encountered a mutation that looks like this- mutation signUp($avatar: Upload!) { signUp( avatar: $avatar input: { name: "Siam Ahnaf" email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail= ...

Error caused by jQuery AJAX call: Receiving a 304 response code causes a problem

I am facing an issue with a script on my localhost that sends a GET request to the same domain. The response I am getting is a 304, which seems to be causing JQuery to treat it as an error. $(document).ready(function(){ $.ajax({ type: 'GE ...

add information to a JavaScript "JSON array"

When working in JS (specifically node/js but applicable to general JS), one common issue arises. Upon receiving JSON data from the server, there is often a need to modify it before presenting it on the view. How should this be approached? Creating additi ...

Is the AngularJS Date property model sending an incorrect value to the server?

There are some puzzling things I am trying to figure out. When using datetimepicker, the Date and time selected appear correctly on the screenshot. The value in the textbox is accurate The model's value in console is correct (but hold on a second... ...

I am experiencing an issue where the Mongo item ID is not being successfully passed through the REST API

Recently, I've been working on developing a blog site for my class project. The main goal is to create a REST API for the blog site. I have successfully managed to display data from the database using .ejs views, except for one issue. I am facing diff ...

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...

What is the best approach for designing the architecture of a server-side node.js application?

Can you recommend a suitable architecture or pattern for building server-side applications using node.js? For the front-end, I plan on implementing a backbone.js MVC framework and utilizing websockets for communication. If you could provide some examples ...

Retrieve the id for the chosen user name within a function that contains an array of objects

const userList = [ {name:"jonh" ,id:EAD1234}, {name:"peter" ,id:EAD1235}, {name:"matt" ,id:EAD1236}, {name:"henry" ,id:EAD1237}, ] In the array above, there are various users with their respective IDs. The goal is t ...

angular-routing does not seem to redirect properly

I'm encountering an issue after logging in, as my page is not redirecting to the main page. Upon investigation, I found that the login condition works when using $window.location. However, I want to implement angular-route to restrict access to the ma ...

Modifying form data when submitting a form

Is there a common or widely-used method for modifying or adding form values before they are serialized and sent to the server upon form submission? I'm looking for a way to change or add these values without having to recreate them. I've come ac ...

Tips on invoking a JSP and Servlet from JavaScript by passing in a parameter

Check out the code below for calling JavaScript functions: <td><input type="button" name="edit" value="Edit" onclick="editRecord(<%=rs.getString(1)%>);" ></td> <td><input type="button" name="delete" value="Delete" onclic ...

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

Implementing sound playback within an AJAX response

Recently, I implemented a jQuery code to automatically refresh a specific div. This auto-refresh feature uses AJAX to generate notifications whenever there is a new request from a client, similar to social network notifications. I even incorporated music f ...

Steps for linking a page to a modal without embedding the page's content within the modal

Here is a snippet of code for a modal (from Twitter Bootstrap) that I am currently working with: <!-- Large Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large Modal</button&g ...

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Within my Jquery function, I have implemented a feature that darkens the screen after a period of user inactivity. This triggers a pop-up window giving the user the option to stay logged in by clicking a button. If there is no response within the set time ...

How to showcase base64 encoded images in pug (jade) with node.js

Can anyone help with decoding this mysterious data and displaying the image? I'm using pug as my template engine. Below is the questionable data that needs to be shown as an image: /9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQ ...and so f ...

Ways to Loop Through a Set of Information and Retrieve it as a List

Here is some sample data: 0: {rowid: "4b531532a5a9", groups: "Group1", descriptions: "Item1"......} 1: {rowid: "e55315ccabb5", groups: "Group2", descriptions: "Item2"......} 2: {rowid: "f2713 ...

DreamFactory's REST API POST request for rest/user/session consistently encounters errors in Internet Explorer 9

In Firefox, Chrome, and Safari, the initial POST rest/user/session request works perfectly fine. However, in Internet Explorer 9, it consistently returns an error. When the dataType is specified as "json," IE9 encounters a 'no transport' error w ...

Version 5 of Material UI has a bug where the Grid component does not properly stretch

How can I make the Grid component stretch when one of the Card components contains extra text? You can view the sample code here. Changing the alignItems property to "flex-end" or "center" works, but when using alignItems: "stretch" it does not work. I ...