AngularJS 조건부 ngStyle 적용되지 않음

AngularJS 범위 변수에 ng 스타일로 조건부로 설정하여 입력 너비에 응답하려고합니다. 나는이 텍스트 정렬 아름답게 작동하도록 입수했습니다하지만 어떤 이유로 그것은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 클래스를 적용하려고하지 않기 때문에 제안 된 가능한 복제본과 다릅니다. 변수를 사용하여 조건부로 스타일을 적용하려고합니다. 당신이 100% width 값을 목표로하는 경우

출처

2016-11-17 KenSchnetz

[조건식와 각도 NG 스타일] (의 가능한 중복 http://stackoverflow.com/ 질문/19375695/angular-ng-style-with-a-conditional-expression) –

솔루션이 서로 다를 수 있으므로 중복 될 수는 없지만 차별화 할만큼 충분히 긍정적 인 것은 아닙니다. –

각도 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

이 문제는 ternary expression 간단하다 : 당신의 js에서

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

는 doResize이 거짓 파일. 당신이 삼항식을 이해하지 못한다면, 그들은 응축 된 것입니다. 코드의 압축 형식은 다음과 같습니다

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

그래서 당신이 그것을 해결하기 위해 두 가지 옵션이 있습니다

변경 $scope.doResize = false;$scope.doResize = true;에
변경 ternary expressiondoResize ? '10%' : '100%';에

희망을 그 도움이됩니다.

출처

2016-11-17 02:12:25

doResize가 false 인 것을 알고, 내 웹 사이트에 구현하기 전에이 문제를 해결하기 위해 전체 코드를 압축했습니다. 또한 문제는 내가 100 % 너비를 얻지 못하고 10 % 너비도 가지지 않는다는 것입니다. 감사합니다. – KenSchnetz

죄송합니다. 오해했습니다. –

미안하지만, 아마 충분히 설명하지 않았어 !! 시간 내 주셔서 대단히 감사합니다. – KenSchnetz

AngularJS 조건부 ngStyle 적용되지 않음

답변

관련 문제