Seeking advice on removing the initial blank space from a dropdown value in Angular.js

Question

Seeking advice on removing the initial blank space from a dropdown value in Angular.js

I have a deeply thought-out logic that I would like to illustrate with an example. However, in order to present it effectively, I am looking for suggestions on how to simplify the process without relying too heavily on the controller.

<select class="form-control" ng-model='zoo' id='zoo' name='animal'  
ng-options="item as item.animal for item in animals  track by item.animal">
</select>

One approach I am considering is:

<select class="form-control" ng-model='zoo' id='contrato_objetivo' name='animal'  
ng-options="item as item.animal.charAt(0)==" "?item.animal.substr(1):item.animal for item in animals  track by item.animal">

My question relates to removing the first character of a string that has an initial space when displayed in the view. Any tips on how to achieve this?

http://fiddle.jshell.net/3g2pmrom/

Thank you for your assistance!

javascript angularjs

Answer 1

Answer №1

To avoid touching the controller, consider implementing a filter.

angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function($scope, $modal) {
        $scope.obj={ };
    $scope.animals=[{"animal":" cat"},{"animal":"dog"}];


}).filter('removespace', function () {
    return function (val) {
        return (!val) ? '' : val.replace(/ /g, '');
    };
});

html

<div ng-app="myApp">

<div ng-controller="MyCtrl">
      <select class="form-control" ng-model='zoo' id='contrato_objetivo' name='animal'  ng-options="item as item.animal for item in animals  track by item.animal | removespace">
              <option style="display:none" value="">Select</option>
  </select>
</div>

fiddle : http://fiddle.jshell.net/eaknm1yh/

the value of the option will be with no space.

Answer 2

To avoid touching the controller, consider implementing a filter.

angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function($scope, $modal) {
        $scope.obj={ };
    $scope.animals=[{"animal":" cat"},{"animal":"dog"}];


}).filter('removespace', function () {
    return function (val) {
        return (!val) ? '' : val.replace(/ /g, '');
    };
});

html

<div ng-app="myApp">

<div ng-controller="MyCtrl">
      <select class="form-control" ng-model='zoo' id='contrato_objetivo' name='animal'  ng-options="item as item.animal for item in animals  track by item.animal | removespace">
              <option style="display:none" value="">Select</option>
  </select>
</div>

fiddle : http://fiddle.jshell.net/eaknm1yh/

the value of the option will be with no space.

Seeking advice on removing the initial blank space from a dropdown value in Angular.js

Answer №1

Similar questions

Ways to transfer a value from ng-Init to the following controller

Retrieve the most recently added child from the Firebase cloud function

Exploring the JSON structure

Not successfully integrating an angular component

In JavaScript, learn how to trigger a statement only when two specific events occur simultaneously

How can we create external labels for a polar chart in ng2-charts and chart.js, with a set position outside the circular rings?

Generate a random number to select a song file in Javascript: (Math.floor(Math.random() * songs) + 1) + '.mp3'

How can I limit the input to only show two decimal places in AngularJS?

A guide on incorporating router links within a list component in a React project

Guide to creating a new window without a menu bar for an onclick function in electronJS

React: What is the best way to dynamically render images by iterating through a list?

Is there a way to identify whether the image file is present in my specific situation?

The lack of definition for e.PreventDefault causes an error

Having trouble locating the bootstrap import statement

Generate a compressed file from a readable source, insert a new document, and transfer the output

Is there a way to consistently serve the identical file using Express?

Angular is sending a parameter with a null value, which is not supposed to happen

Understanding how to monitor a Boolean value that fluctuates in real-time within a three.js

Setting the minimum value in a text box using AngularJS

Error encountered in jQuery validation: Uncaught TypeError - $(...) ""valid is not a function" is displayed with proper references and order