How to split a predetermined angular variable into separate variable

Question

I'm in the middle of working on a code that wants me to incorporate an inputted dimension as the width and height of the image displayed.

The dimension would be written as 300x250 and the height and width of the image would change accordingly to that.

The line of code I need to manipulate is:

<div ng-app="" ng-init="baseUrl='foo.img'">
  File name: <input style="width:225px" ng-model="filename" value="{{filename}}">

I can't change anything in that-- I just have to generate the image based on the filename i was given. I assumed that I could get away with something like:

<img style="width: {{filename}}px" src="{{baseUrl}}" alt="">

but the problem with this is that once an X is introduced in the width, it malfunctions. Any ideas? I can generate any sort of angular to spit out the result.

Edits: Malfunctions: meaning that once 300x is written the image disappears since 300x is not an actual size that CSS understands. I want something like 300x250 to be understood as width=300px and height=250px.

What do you mean by "it malfunctions". Please explain in detail what it's doing wrong versus what you expect. — Soviut
– Soviut, Commented Jul 29, 2017 at 2:08
Updated, basically as the filename updates the image gets bigger until an X is written. The image then disappears since a value like 300X is not an actual measurement that CSS understands. I want something like 300x250 to be understood as width=300px and height=250px. — Jerry Pallath
– Jerry Pallath, Commented Jul 29, 2017 at 2:11

Gaurav Srivastava · Accepted Answer · 2017-07-29 04:07:06Z

You could split the dimension based on * and set it width and height:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.width = 225;
  $scope.height = 300
  $scope.filename = $scope.width+'*'+$scope.height;
  $scope.buildDimensions = function(dim) {
    var res = dim.split("*");
    if(res[0] != undefined){
       $scope.width = res[0];
     }
     if(res[1] != undefined){
       $scope.height = res[1];
     }
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

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

    <div ng-init="baseUrl='https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'">
      File name: <input ng-change="buildDimensions(filename)" style="width:225px" ng-model="filename" value="{{filename}}">
      <img style="width: {{width}}px;height: {{height}}px" src="{{baseUrl}}" alt="">
    </div>

Collectives™ on Stack Overflow

How to split a predetermined angular variable into separate variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related