我试图通过使用 ng-style 有条件地设置输入宽度来响应 AngularJS 范围变量。我已经让它与文本对齐完美配合，但由于某种原因，它不适用于宽度...
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 类，而是尝试使用变量有条件地应用内联样式。
最佳答案
我发现您正在使用 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>关于javascript - AngularJS 条件 ngStyle 不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40645310/