30.11.2017, 10:29
|
|
Аспирант
|
|
Регистрация: 27.04.2017
Сообщений: 79
|
|
|
Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс?
Добрый день.
http://jsfiddle.net/jx9mz/235/
Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс? |
|
30.11.2017, 10:32
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от Djambulat
|
|
Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс?
|
Поменяй на ng-class... |
|
30.11.2017, 10:42
|
|
Аспирант
|
|
Регистрация: 27.04.2017
Сообщений: 79
|
|
|
Поменять то можно, просто возможно ли осуществить то, что я говорю? Это реально?
|
|
30.11.2017, 12:06
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Djambulat,
При использовании ng-hide/ng-show элемент скрывается или показывается путем добавления или удаления css класса .ng-hide.
|
|
30.11.2017, 13:41
|
|
Аспирант
|
|
Регистрация: 27.04.2017
Сообщений: 79
|
|
|
Если можешь объясни по-другому я не понял)
|
|
30.11.2017, 14:00
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Djambulat,
Это специализированные директивы - для простоты использования.
|
Цитата:
|
ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA, скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.
Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.
|
Последний раз редактировалось Dilettante_Pro, 30.11.2017 в 14:10.
|
|
30.11.2017, 14:11
|
|
Аспирант
|
|
Регистрация: 27.04.2017
Сообщений: 79
|
|
|
Я знаю, что делают эти директивы. Просто у меня такая задача....
На странице есть клавиатура, и блок(div) внутри которого есть текст, к которому применен css класс. Мне нужно, чтобы после того как я напечатаю на 5 букв с клавиатуры, этот класс исчезал и текст был обычным.... Сможете помочь?
|
|
30.11.2017, 15:05
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
<!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>
Последний раз редактировалось Dilettante_Pro, 30.11.2017 в 18:53.
|
|
30.11.2017, 15:26
|
|
Аспирант
|
|
Регистрация: 27.04.2017
Сообщений: 79
|
|
|
Спасибо. Ну а так можно ли поменять свой hide так чтобы он не скрывал а применял класс? Просто интересно очень
|
|
30.11.2017, 18:56
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Djambulat,
Можете писать свои директивы. Ангуларские ломать не стоит. А применяет классы по условию ng-class
Последний раз редактировалось Dilettante_Pro, 30.11.2017 в 19:02.
|
|
|
|
