текст элемента доступа к классу

0

У меня такая ситуация в приложении AngularJS.

$scope.current = 'my elem';

<div ng-class="{active: THIS ELEMENT TEXT === current}">my elem<div>

Могу ли я получить доступ к div.text() внутри директивы ng-class?

  • 0
    Не уверен, что вы имеете в виду здесь, может быть, сделать вопрос более ясным.
  • 0
    поэтому я хочу добавить активный класс к моему элементу, если $ ('div'). text () === current, поэтому я могу получить доступ к element.text () внутри ng-класса?
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Я не уверен, что вы просите, см. Фрагмент того, как использовать ng-class для применения условного класса CSS на основе сравнения строк.

Если вы наберете "красный" в поле ввода, текст станет красным

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
  $scope.content = ["blue", "red", "green"];
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<style>
  .red_text_class {
    color: red;
  }
  .blue_text_class {
    color: blue;
  }
  .green_text_class {
    color: green;
  }
</style>

<body ng-app="App" ng-controller="Ctrl">
  <div ng-repeat="value in content">
    <div ng-class="{red_text_class: value=='red',blue_text_class: value=='blue',green_text_class: value=='green'}">{{value}}</div>
  </div>
  <input ng-model="myText" />{{myText}}
</body>
Поделиться
  • 0
    да, это решение хорошо, но вместо <div ng-class = "{red: myText == 'red'}"> HAHAHAHAHA </ div> возможно иметь что-то вроде red: element.text () == ' красный»
  • 0
    Я думаю, что вы пришли из JQeury, это не так, как работает angularJS. Я обновил мой пример с тем, что вы хотите, но я считаю, что это плохая практика.
1

Вы можете проверить текст в div с помощью службы $ element:

HTML:

<body ng-app="test" ng-controller="Ctrl">
    <div ng-class="{active: innerText === current}">my element</div>
</body>

контроллер:

angular.module('test', [])
  .controller('Ctrl', Ctrl);

Ctrl.$inject = ['$scope', '$element'];

function Ctrl($scope, $element) {
  $scope.current = 'my element';

  $scope.innerText = $element.find('div').text();
}

плункер здесь

Поделиться
0

Для этого вам, вероятно, следует добавить динамический текст в вашем div следующим образом:

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
  $scope.current = 'my elem';
  
  $scope.text1 = 'my elem';
  $scope.text2 = 'my other elem';
});
.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="App" ng-controller="Ctrl">
  <div ng-class="{active: text1 == current}" ng-bind="text1"></div>
  <div ng-class="{active: text2 == current}" ng-bind="text2"></div>
</body>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню