javascript - AngularJS - 値に値を追加する

Question

スコープ変数に整数を追加することは可能ですか?

例えば

<div style="top:{{top + 140}}px">....</div>  

top が 140 の場合、 「140140px」ではなく「280px」になるはずです

これは可能ですか？

Answer 1

これが最善の方法だとは思いませんが、次の方法を試すことができます。

<div style="top:{{top * 1 + 140}}px">....</div>  

top を強制的に整数にします。

Answer 2

@Mathew Bergへのあなたの反応について：

この問題が発生する理由は、「top」が文字列リテラルであることをAngularに伝えているためです。Mathewの方法は、値を整数として解釈するためのトリックを実行しますが、それでも基本的には回避策です。@bleshは、コントローラーレベルでこれを行う必要があると言っているのは完全に正しいです。それで...

これ

function myContoller($scope) {
    $scope.top = '1';
}
<div style="top:{{top + 140}}px"></div>
<!-- Output = <div style="top:1140px"></div> -->

この

function myContoller($scope) {
    $scope.top = 'one';
}
<div style="top:{{top + 140}}px"></div>
<!-- Output = <div style="top:one140px"></div> -->

同じように扱われます。

基本的に、意図した算術ではなく、誤って連結していることになります。

幸いなことに、救済策は非常に簡単です。渡す必要のある整数から括弧を削除するだけで、Angularは「これは数値です。数学を実行しましょう」と表示します。

eg 
function myController($scope) {
    $scope.top = 140;
}

<div style="top:{{top + 140}}px"></div>
<!-- Output = <div style="280px"></div> -->

「Topは$scope.dealerにあり、私はng-repeat = "d indealer"を使用しています。正確にはd.topになります」と述べたので、適切なスコープにアクセスするには、これを少し調整する必要があります。 、しかし、それでも解決策は当てはまります。Angularのすばらしい点の1つは、マークアップ構文内の式を本質的に処理できることです。Angularは期待どおりに機能するため、これが問題の原因を説明するのに役立つことを願っています。=）