Угловой JS Условный ngStyle не применяется

Я пытаюсь сделать мою ширину ввода ответом на переменную области AngularJS, установив ее ширину условно с ng-style. Я получил это красиво работать с текстом выравнивать, но по какой-то причине он не работает с шириной ...Угловой JS Условный 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; 
    }; 
});

EDIT : Это отличается от предлагаемого возможного дубликата, потому что я не пытаюсь применить статический класс CSS, я пытаюсь использовать переменную, чтобы условно применить стиль inline.

источник

2016-11-17 KenSchnetz

Возможного дубликат [Угловых нг-стиль с условным выражением] (http://stackoverflow.com/ вопросы/19375695/angular-ng-style-with-a-conditional-expression) –

решения различны, что это не может быть дубликат, хотя я не уверен, если этого достаточно, чтобы различать. –

Я вижу, что вы используете 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>

источник

2016-11-17 02:44:13 kukkuz

@KenSchnetz дайте мне знать ваши отзывы об этом, спасибо! – kukkuz

Идеально ... для меня что-то странное, так это то, что путь в моем JSFiddle работает с выравниванием текста без проблем, но он не работает для ширины. Однако ваше решение отлично работает! Спасибо. – KenSchnetz

Если вы стремитесь к значению 100% width, проблема проста ternary expression:

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

в ваших JS файл doResize ложна. Если вы не понимаете тернарных выражений, они сжаты, если. Несжатый форма вашего кода:

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

Так у вас есть два варианта, чтобы исправить это:

Изменить $scope.doResize = false; в $scope.doResize = true;
изменить ternary expression к doResize ? '10%' : '100%';

Надежда, что помогает.

источник

2016-11-17 02:12:25

Я понимаю, что doResize является ложным, я сократил свой общий код, чтобы решить эту проблему, прежде чем внедрять ее на своем веб-сайте. Кроме того, проблема не в том, что я не получаю ширину 100%, я тоже не получаю 10-процентную ширину. Спасибо за ваше время! – KenSchnetz

извините, я неправильно понял. –

Прошу не жалеть, я, вероятно, не объяснил это достаточно хорошо! Большое вам спасибо за ваше время. – KenSchnetz

Угловой JS Условный ngStyle не применяется

ответ

Смежные вопросы