AngularJS条件ngStyle不适用答案

【问题标题】：AngularJS Conditional ngStyle not applyingAngularJS条件ngStyle不适用
【发布时间】：2017-03-31 10:18:09
【问题描述】：

我试图让我的输入宽度响应 AngularJS 范围变量，方法是使用 ng-style 有条件地设置它的宽度。我已经让它与 text-align 很好地工作，但由于某种原因它不适用于宽度......

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 ng-style with a conditional expression的可能重复
解决方案有很大的不同，不能重复，但如果这足以区分，我不肯定。

标签： javascript html angularjs conditional directive

【解决方案1】：

我看到您使用的是 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>

【讨论】：

@KenSchnetz 让我知道您对此的反馈，谢谢！
完美...对我来说奇怪的是，在我的 JSFiddle 中这样做的方式与文本对齐无关，但它不适用于宽度。但是，您的解决方案效果很好！！谢谢。

【解决方案2】：

如果你的目标是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%';

希望对您有所帮助。

【讨论】：

我知道 doResize 是错误的，我在我的网站中实施之前压缩了我的整体代码来解决这个问题。此外，问题不是我没有得到 100% 的宽度，我也没有得到 10% 的宽度。感谢您的宝贵时间！
对不起，我误会了。
请不要抱歉，我可能解释得不够清楚！！非常感谢您的宝贵时间。