Я нахожу ответы здесь все время, но не выкладывал вопрос годами. Я прочитал вопросы, похожие на мой текущий, но после применения всех советов, которые я нашел, я все еще не могу заставить свой код работать. Я пытаюсь назначить класс условно с помощью ng-class, и он не работает.

Это все очень большие файлы (поэтому я просто опубликую соответствующий код ниже), которые отлично работают с angularJS, за исключением попыток добавить ng-класс. Я поместил текст кнопки в качестве логического значения для выбранного свойства, чтобы убедиться, что оно правильно переключается, и это происходит. Просто не работает для нг-класса.

Заранее спасибо!

Html:

<div>
    <div><em>Click buttons below to show or hide bills for each issue.</em></div>
    <button ng-repeat="type in issueTypes" ng-click="toggleBtn(type.show, $index)" 
            class="w3-button w3-round-small w3-light-blue btn-space" 
            ng-class="{'testing' : type.selected}">{{type.selected}}</button>   
</div>

Css:

 .testing {     color: red; }

Js:

    $scope.issueTypes = [{name: "Education", show: "education", selected: false}, {name: "Health Care", show: "health", selected: false},  
    {name: "Civil Rights", show: "civil", selected: true}, {name: "Gun Control", show: "guns", selected: false}, {name: "Women's Rights", show: "women", selected: false}];

    $scope.toggleBtn = function(showString, index) {
    $scope[showString] = !$scope[showString];
    $scope.issueTypes[index].selected = !$scope.issueTypes[index].selected;
  }
1
Sarah Richardson 5 Апр 2017 в 20:37

2 ответа

Лучший ответ

Хорошо, получил это работает! Выяснилось, что проблема в том, что используемый мной сторонний CSS-файл помечен цветом «! Важно», поэтому мой CSS не смог его переопределить. Теперь я пометил цвет моего класса "! Важно", и он работает правильно. Должен не забыть проверить это в следующий раз, когда у меня есть проблема класса стиля !! Спасибо всем за помощь!

0
Sarah Richardson 6 Апр 2017 в 14:56

Я создаю демо, и, кажется, работает нормально. Поскольку это небольшая часть большего кода, убедитесь, что соответствующие классы стилей добавлены правильно.

angular.module("app",[])
.controller("ctrl",function($scope){
    $scope.issueTypes = [{name: "Education", show: "education", selected: false}, {name: "Health Care", show: "health", selected: false},  
        {name: "Civil Rights", show: "civil", selected: true}, {name: "Gun Control", show: "guns", selected: false}, {name: "Women's Rights", show: "women", selected: false}];
        

    $scope.toggleBtn = function(showString, index) { 
       $scope.issueTypes[index].selected = !$scope.issueTypes[index].selected;
    }

})
.testing {     color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
          <div><em>Click buttons below to show or hide bills for each issue.</em></div>
          <button ng-repeat="type in issueTypes" ng-click="toggleBtn(type.show, $index)" class="w3-button
w3-round-small w3-light-blue btn-space" 
ng-class="{'testing' :type.selected}">{{type.selected}}</button>    
       </div>
</div>
0
Sachila Ranawaka 5 Апр 2017 в 17:45