Angular: Enhancing View Attribute by Eliminating Extra Spaces

Question

Angular: Enhancing View Attribute by Eliminating Extra Spaces

I'm using an ng repeat directive to dynamically set the height in my code.

 <ul>
<li ng-repeat="val in values" height-dir >{{val.a}}</li>
</ul>

    app.directive('heightDir',function(){
return {
    restrict: 'AE',
    replace: true,
    template: '<li ng-repeat="val in values" style="height:{{val.b}}%" >{{val.a}}</li>',
    link: function(scope, elem, attrs) {

    }
  };
});
$scope.values= [{a:"Doe",b:10},{a:"bom",b:20},{a:"kal",b:30},{a:"jijo",b:40}];

Upon running the code, I noticed a gap between the value and % where the style was not applied. Can anyone suggest a solution to this issue? Any help is appreciated. Thank you.

javascript angularjs

Answer 1

Answer №1

It appears that there may be an issue with the HTML markup being incorrectly generated.

Check out the code snippet below:

<div ng-controller="MyCtrl">
    <ul style="height:500px">
        <height-dir ng-repeat="val in values"></height-dir>
    </ul>
</div>

Here is the corresponding JavaScript code:

var myApp = angular.module('myApp',[]);

myApp.directive('heightDir',function(){
    return {
        restrict: 'AE',
        replace: true,
        template: '<li style="height:{{val.b}}%" >{{val.a}}</li>',
        link: function(scope, elem, attrs) {
    }
  };
});

function MyCtrl($scope) {
    $scope.values= [{a:"Doe",b:10},{a:"bom",b:20},{a:"kal",b:30},{a:"jijo",b:40}];
}

For a live demonstration, visit the following Fiddle link: http://jsfiddle.net/HB7LU/12044/

Answer 2

It appears that there may be an issue with the HTML markup being incorrectly generated.

Check out the code snippet below:

<div ng-controller="MyCtrl">
    <ul style="height:500px">
        <height-dir ng-repeat="val in values"></height-dir>
    </ul>
</div>

Here is the corresponding JavaScript code:

var myApp = angular.module('myApp',[]);

myApp.directive('heightDir',function(){
    return {
        restrict: 'AE',
        replace: true,
        template: '<li style="height:{{val.b}}%" >{{val.a}}</li>',
        link: function(scope, elem, attrs) {
    }
  };
});

function MyCtrl($scope) {
    $scope.values= [{a:"Doe",b:10},{a:"bom",b:20},{a:"kal",b:30},{a:"jijo",b:40}];
}

For a live demonstration, visit the following Fiddle link: http://jsfiddle.net/HB7LU/12044/

Angular: Enhancing View Attribute by Eliminating Extra Spaces

Answer №1

Similar questions

I am eager to retrieve intricate JSON data with the help of AngularJS

Having trouble understanding how to display an HTML file using Next.JS?

In React + TypeScript, learn how to effectively pass down a function from a container component to a

What could be the reason for v-model not functioning properly?

Tips for showcasing the error message from the back-end instead of the status code

Encountered an error while using JSON.parse(): `SyntaxError: Unexpected token in JSON at position 0`

The error message "Cannot read property 'addEventListener' of undefined" occurred while trying to register the service worker using `navigator.serviceWorker.register('worker.js')`

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

Advantages of placing script src tags at the top of the body versus placing them at the bottom of the body

Transmit information to Angular application upon being delivered by Express

I could really use some assistance with the concept of "AJAX" - can anyone help

Revamping JSON structure by identifying id references

Just released a new npm package called vue-izitheme. It's fully functional from the command line, but for some reason it's not showing up in search results. Any suggestions on how to fix

having difficulty inputting time into a time controller with selenium webdriver

Passing a JavaScript value to a Bootstrap modal and then utilizing it as a C# variable

Adjust the map automatically as the cursor approaches the map's edge in Google Maps API V3

Modifying the state object in ReactJS: A step-by-step guide on updating values

What is the best way to dynamically change the main content based on the sidebar option chosen in a React application?

Encountering Rendering Issues with EJS Post HTML Conversion

The getelementbyid function is unable to locate the specified button identifier