AngularJS 条件 ngStyle 未应用

13 浏览
0 Comments

AngularJS 条件 ngStyle 未应用

我正在尝试使用AngularJS作用域变量来使输入框的宽度响应，通过使用ng-style有条件地设置它的宽度。我已经成功地在text-align上实现了这一点，但是出于某种原因在width上却没有成功...

HTML代码：

JS代码：

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

编辑：

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

0

2 答案

0 Comments

问题的原因是在js文件中doResize的值为false，解决方法有两种：将$scope.doResize的值改为true，或者将ternary expression改为doResize ? '10%' : '100%'。

文章如下：

如果你的目标是100%的宽度，问题很简单，就是ternary expression（三元表达式）：

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

在你的js文件中，doResize的值是false。如果你不理解ternary expression，它们是一种压缩的if语句。你的代码的非压缩形式是：

if(doResize) {

return '100%';

} else {

return '10%';

}

所以你有两种解决方法：

1. 将$scope.doResize的值改为true；

2. 将ternary expression改为doResize ? '10%' : '100%'。

希望能帮到你。

我理解doResize的值是false，我在实现代码之前对我的整体代码进行了压缩以解决这个问题。另外，问题不是我没有得到100%的宽度，也不是我没有得到10%的宽度。非常感谢你的时间！

对不起，我误解了。

请不要抱歉，可能我没有解释得足够清楚！非常感谢你的时间。

0
0 Comments

问题的出现的原因是在使用AngularJS 1.0.1版本时，ng-style指令在应用条件时存在问题。在给定的示例中，ng-style指令用于设置输入框的宽度，根据条件doResize的值来决定宽度为100%还是10%。然而，使用doResize && {'width':'100%'} || {'width':'10%'}的方式在该版本中不起作用。

解决方法是使用ng-style指令中的三元表达式来替代条件语句。将ng-style的值设置为doResize ? {'width':'100%'} : {'width':'10%'}，这样就可以根据doResize的值来动态设置宽度。

以下是修正后的示例代码：



  
  
  
  
  isMobile value: {{doResize}}

修正后的代码将根据doResize的值来设置输入框的宽度，当doResize为true时，宽度为100%，否则宽度为10%。这样就能正确地根据条件来应用样式。

希望以上解决方法对您有帮助，谢谢！

0