Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.11.2017, 10:29
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс?
Добрый день.
http://jsfiddle.net/jx9mz/235/

Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс?
Ответить с цитированием
  #2 (permalink)  
Старый 30.11.2017, 10:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,991

Сообщение от Djambulat
Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс?
Поменяй на ng-class...
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2017, 10:42
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Поменять то можно, просто возможно ли осуществить то, что я говорю? Это реально?
Ответить с цитированием
  #4 (permalink)  
Старый 30.11.2017, 12:06
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Djambulat,
При использовании ng-hide/ng-show элемент скрывается или показывается путем добавления или удаления css класса .ng-hide.
Ответить с цитированием
  #5 (permalink)  
Старый 30.11.2017, 13:41
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Если можешь объясни по-другому я не понял)
Ответить с цитированием
  #6 (permalink)  
Старый 30.11.2017, 14:00
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Djambulat,
Это специализированные директивы - для простоты использования.
Цитата:
ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA, скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.

Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.

Последний раз редактировалось Dilettante_Pro, 30.11.2017 в 14:10.
Ответить с цитированием
  #7 (permalink)  
Старый 30.11.2017, 14:11
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Я знаю, что делают эти директивы. Просто у меня такая задача....
На странице есть клавиатура, и блок(div) внутри которого есть текст, к которому применен css класс. Мне нужно, чтобы после того как я напечатаю на 5 букв с клавиатуры, этот класс исчезал и текст был обычным.... Сможете помочь?
Ответить с цитированием
  #8 (permalink)  
Старый 30.11.2017, 15:05
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 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)" >&lArr;</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.
Ответить с цитированием
  #9 (permalink)  
Старый 30.11.2017, 15:26
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Спасибо. Ну а так можно ли поменять свой hide так чтобы он не скрывал а применял класс? Просто интересно очень
Ответить с цитированием
  #10 (permalink)  
Старый 30.11.2017, 18:56
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Djambulat,
Можете писать свои директивы. Ангуларские ломать не стоит. А применяет классы по условию ng-class

Последний раз редактировалось Dilettante_Pro, 30.11.2017 в 19:02.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать так чтобы показывалось загрузка картинки sarik Общие вопросы Javascript 15 18.02.2013 10:27
Как сделать чтобы элемент появлялся при скроле страницы, у определенного класса. SnakeAce Общие вопросы Javascript 1 30.01.2013 13:32
jCarousel - как сделать чтобы подсвечивался текущий элемент управления? cenzored jQuery 15 18.06.2012 14:11
Как дождаться выполнения эффекта hide и потом удалить элемент? FRIE jQuery 3 07.06.2011 11:58
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18