あらかじめ決められた角度変数を別の変数に分割する方法

入力された寸法を表示する画像の幅と高さに組み入れるコードを作成中です。あらかじめ決められた角度変数を別の変数に分割する方法

寸法は300x250と書かれ、画像の高さと幅はそれに応じて変化します。

私が操作するのに必要なコードの行がある：私はちょうど私が与えられたファイル名に基づいて画像を生成する必要がthat--には何も変更することはできません

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

。私は、私のような何かを離れて得ることができると仮定：

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

が、これに伴う問題は、Xは、幅が導入されると、それが誤動作ということです。何か案は？私は結果を吐き出すためにあらゆる角度の角度を生成することができます。

編集：誤動作：300xは、CSSが理解する実際のサイズではないため、300xが書き込まれると画像が消えることを意味します。 300x250のようなものをwidth = 300px、height = 250pxとして理解したいと思います。

出典

2017-07-29 Jerry Pallath

あなたは「それが誤動作」とはどういう意味ですか。あなたが期待していることと間違っていることを詳細に説明してください。 – Soviut

基本的にファイル名が更新されると、Xが書き込まれるまでイメージが大きくなります。 300Xのような値はCSSが理解している実際の測定値ではないので、イメージは消えます。 300x250のようなものをwidth = 300px、height = 250pxとして理解したいと思います。 –

あなたは*に基づいて次元を分割し、幅と高さを設定できます -

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>

出典

2017-07-29 04:07:06

あらかじめ決められた角度変数を別の変数に分割する方法

答えて

関連する問題