AngularJS有條件ngStyle不適用

我想通過使用ng樣式有條件地設置它的寬度來使我的輸入寬度響應AngularJS範圍變量。我得到這個與文本對齊做工精美，但由於某種原因它不與寬度的工作...AngularJS有條件ngStyle不適用

的HTML：

<body ng-app="vfApp"> 
    <!--This works... --> <input resize ng-style="{ 'width' : '100%' }" type="text"/> 
    <!--This does not?!--> <input resize ng-style="{ 'width' : doResize ? '100%' : '10%' }" type="text"/> 
</body>

的JS：

var vfApp = angular.module('vfApp', []); 
vfApp.directive('resize', function() { 
    return function ($scope) { 
     $scope.doResize = false; 
    }; 
});

編輯：這是不同於建議可能的重複，因爲我沒有嘗試應用靜態CSS類，我試圖使用變量來有條件地應用內聯樣式。

來源

2016-11-17 KenSchnetz

的[與條件表達式角NG式（可能的複製http://stackoverflow.com/問題/ 19375695/angular-ng-style-with-a-conditional-expression） –

解決方案不同，它不能重複，儘管如果這足以區分，我並不積極。 –

我看你使用的是Angular 1.0.1。您可以使用此：

ng-style="doResize && {'width':'100%'} || {'width':'10%'}"

請參見下面的演示：

var vfApp = angular.module('vfApp', []); 
 
vfApp.directive('resize', function($window) { 
 
    return function($scope) { 
 
    $scope.doResize = true; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
 

 
<body ng-app="vfApp"> 
 
    <!--This works...--> 
 
    <input resize ng-style="{ 'width' : '100%' }" type="text" /> 
 
    <!--This does not?!--> 
 
    <input resize ng-style="doResize && {'width':'100%'} || {'width':'10%'}" type="text" /> 
 

 
    <br/>isMobile value: {{doResize}} 
 

 
</body>

來源

2016-11-17 02:44:13 kukkuz

@KenSchnetz讓我知道你對此的反饋，謝謝！ – kukkuz

完美...對我來說很奇怪的是，在我的JSFiddle中使用文本對齊的方式沒有問題，但它不適用於寬度。不過你的解決方案很棒！謝謝。 – KenSchnetz

如果你的目標是爲100% width值，這個問題很簡單的ternary expression：

doResize ? '100%' : '10%'.

在你的JS文件doResize是假的。如果你不明白三元表達式，那麼它們是一個濃縮的if。你的代碼的壓縮形式是：

if(doResize) { 
    return '100%'; 
} else { 
    return '10%'; 
}

所以，你有兩種選擇來解決它：

變化$scope.doResize = false;到$scope.doResize = true;
更改ternary expression到doResize ? '10%' : '100%';

。希望幫助。

來源

2016-11-17 02:12:25

我知道doResize是錯誤的，我在我的網站中實施它之前，濃縮了我的整體代碼以解決此問題。此外，問題不是我沒有得到100％的寬度，我也沒有得到10％的寬度。謝謝你的時間！ – KenSchnetz

對不起，我誤解了。 –

請不要對不起，我可能沒有足夠的解釋！非常感謝您的參與。 – KenSchnetz

AngularJS有條件ngStyle不適用

回答

相關問題