AngularJS/JavasScriptのローカル画像パス

イベント（具体的には選択オプションの変更）で背景画像の変更を作成したいのですが、ローカル環境で画像パスを取得できません。AngularJS/JavasScriptのローカル画像パス

私のイメージパスがディレクトリである：イメージとhttp://localhost/webpage1/img/yellow.jpg

私は私のアプリ（<div ng-controller="myCtrl" ng-style="style"）でng-styleディレクティブを入れて、コントローラとそれをバインドしました：私はしかし

app.controller('myCtrl', function($scope) { 
    $scope.options = [ 
     { type: 'yellow'}, 
     { type: 'green'} 
    ]; 
    //default image 
    $scope.subject = $scope.options[0].type; 
    $scope.image = $scope.subject + ".jpg"; 
    $scope.style = {background: "url(" + $scope.image + ") no-repeat center center fixed"}; 
    .... 
});

私の画像のファイルパスを取得するのが難しい。私はそれがライブを置くと同じではないので、全体のファイルパスを一覧にしたくないので、$scope.filepath = 'localhost/webpage1/img';のような何かをするのは非常に面倒で醜いです。

編集：私のオプションを選択します

<select ng-model="subject" name="subject" class="subject" > 
    <option ng-repeat="type in options">{{ type.type }}</option> 
</select>

出典

2016-03-23 Storm Parker

このSOの質問とすべての答えを見てください：http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl – DotNetWala

背景に別のクラスを作成します。あり、それを行うには複数の方法がありますが、あなたは$locationを注入し、構築することができます：あなたの特定の質問に対処するために選択オプション

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.options = [ 
 
     { type: 'yellow'}, 
 
     { type: 'green'} 
 
    ]; 
 
});

/* Put your css in here */ 
 
.foo { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.yellow { 
 
    background-image: url(http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg); 
 
} 
 

 
.green { 
 
    background-image: url(http://im.rediff.com/news/2015/dec/24tpoty20.jpg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app"> 
 
<div ng-controller="MainCtrl"> 
 
    <select ng-model="subject" name="subject" class="subject" > 
 
    <option ng-repeat="type in options">{{ type.type }}</option> 
 
    </select> 
 
    <div class="foo" ng-class="subject"></div> 
 
</div> 
 
</body>

出典

2016-03-23 16:43:34 misher

このメソッドを試してみましたが、私は持っています選択オプションへのアクセスに問題があります。私は元の質問に自分の選択のためにHTMLを入れました。それは '{'黄色'：options.yellow ...'や '{'黄色：subject.yellow ...'のようなものでしょうか？ –

しばらくお待ちください。私は詳細をもっと詳細にします... – misher

私はそれをもっと簡単にしました、plunkerでチェックしてください：https://plnkr.co/edit/MWgT4N8v2GscL3XmIcb9?p=preview – misher

に基づいてスタイルの変更をトリガする要素に使用NG-クラスイメージのあなたのURL。

出典

2016-03-23 16:48:17 philoniare

これも同様に、私はちょうどそれがローカルまたはライブを持つときに異なる結果を恐れています。 –

AngularJS/JavasScriptのローカル画像パス

答えて

関連する問題