Javascript AngularJS条件ngStyle不适用_Javascript_Html_Angularjs_Conditional_Directive

Javascript AngularJS条件ngStyle不适用

javascript html angularjs

Javascript AngularJS条件ngStyle不适用,javascript,html,angularjs,conditional,directive,Javascript,Html,Angularjs,Conditional,Directive,我试图通过使用ng样式有条件地设置输入宽度，使输入宽度响应AngularJS范围变量。我已经得到了这个工作与文本对齐漂亮，但由于某些原因，它是不工作的宽度 HTML： <body ng-app="vfApp">  <input resize ng-style="{ 'width' : '100%' }" type="text"/>  <in

我试图通过使用ng样式有条件地设置输入宽度，使输入宽度响应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>

编辑：

这与建议的可能复制不同，因为我不是在尝试应用静态CSS类，而是在尝试使用变量来有条件地内联应用样式。

如果您的目标是

100%宽度

值，问题很简单

三元表达式

：

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

在js文件中，

doResize

为false。如果你不理解三元表达式，它们是一个浓缩的If。代码的未压缩形式为：

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

因此，您有两个选项来修复它：

更改

$scope.doResize=false

至

$scope.doResize=true


将三元表达式更改为doResize？“10%' : '100%';

希望对您有所帮助。
我看到您正在使用Angular 1.0.1。您可以使用以下选项：
ng-style="doResize && {'width':'100%'} || {'width':'10%'}"

请参见下面的演示：

var vfApp=angular.module（'vfApp'，[]）；
指令（'resize'，函数（$window）{
返回函数（$scope）{
$scope.doResize=true；
};
});


isMobile值：{{doResize}
解决方案的可能副本差异很大，不可能是副本，但我不确定这是否足以区分。@KenSchnetz让我知道您对此的反馈，谢谢！完美的让我感到奇怪的是，在我的JSFIDLE中使用文本对齐的方式没有问题，但它不适用于宽度。但是，您的解决方案非常有效！！谢谢。我知道doResize是错误的，在我的网站上实现它之前，我压缩了我的全部代码来解决这个问题。另外，问题不是我没有得到100%的宽度，我也没有得到10%的宽度。谢谢你抽出时间！对不起，我误解了。请不要抱歉，我可能解释得不够好！！非常感谢您抽出时间。
ng-style="doResize && {'width':'100%'} || {'width':'10%'}"