Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс?
Добрый день.
http://jsfiddle.net/jx9mz/235/ Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс? |
Цитата:
|
Поменять то можно, просто возможно ли осуществить то, что я говорю? Это реально?
|
Djambulat,
При использовании ng-hide/ng-show элемент скрывается или показывается путем добавления или удаления css класса .ng-hide. |
Если можешь объясни по-другому я не понял)
|
Djambulat,
Это специализированные директивы - для простоты использования. Цитата:
|
Я знаю, что делают эти директивы. Просто у меня такая задача....
На странице есть клавиатура, и блок(div) внутри которого есть текст, к которому применен css класс. Мне нужно, чтобы после того как я напечатаю на 5 букв с клавиатуры, этот класс исчезал и текст был обычным.... Сможете помочь? |
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<style type="text/css">
div {height:20px;}
div span{
cursor: pointer;
border:1px solid black;
}
.short{ color: green;}
.long {color:red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<main ng-controller="AppController">
<div ng-class="{short:inputstring.length <= 5, long: inputstring.length > 5}">{{ inputstring }}</div>
<div>
<span ng-click="chngShift()"> {{view}}</span>
<span ng-click="chngLetter()">{{language}}</span>
<span ng-repeat='b in letter' ng-click="getLetter(b)"> {{b}}</span>
<span ng-click="inputstring = inputstring.slice(0,-1)" >⇐</span>
</div>
</main>
<script>
(function() {
'use strict';
angular
.module('app', [])
.controller('AppController', ['$scope', function($scope) {
var alfa ={eng:{alt:'rus',alf:'qwerty'}, rus:{alt:'eng',alf:'йцукен'}};
var shift ={up:{alt:'down',view:'String.fromCharCode(0x21D1)'},down:{alt:'up',view:'String.fromCharCode(0x21D3)'}};
$scope.view = eval(shift.up.view);
$scope.shift = shift.up.alt;
$scope.letter = alfa.eng.alf;
$scope.language =alfa.eng.alt;
$scope.inputstring = "";
$scope.getLetter = function(letter) {
$scope.inputstring += letter ;
};
$scope.chngLetter = function() {
$scope.letter = alfa[$scope.language].alf ;
$scope.language =alfa[$scope.language].alt ;
if(shift[$scope.shift].alt == 'down')
{ $scope.letter = $scope.letter.toUpperCase(); }
else
{ $scope.letter = $scope.letter.toLowerCase(); };
};
$scope.chngShift = function() {
if(shift[$scope.shift].alt == 'up')
{ $scope.letter = $scope.letter.toUpperCase(); }
else
{ $scope.letter = $scope.letter.toLowerCase(); };
$scope.view = eval(shift[$scope.shift].view);
$scope.shift = shift[$scope.shift].alt;
};
}]);
})();
</script>
</body>
</html>
|
Спасибо. Ну а так можно ли поменять свой hide так чтобы он не скрывал а применял класс? Просто интересно очень
|
Djambulat,
Можете писать свои директивы. Ангуларские ломать не стоит. А применяет классы по условию ng-class |
Цитата:
|
| Часовой пояс GMT +3, время: 01:40. |