Кнопки для изменения классов с помощью AngularJS ngClick и ngClass

По сути, я пытаюсь получить кнопки для установки ng-class на div. Кнопки создаются из массива с использованием ng-repeat, и массив будет расти со временем. Я основывал свою идею на том, как закодировать это в последнем примере на this page of the AngularJS documentation, который не использует функцию с ng-click. Я новичок в AngularJS и все еще пытаюсь уйти от своего мышления jQuery, поэтому дайте мне знать, если это не лучший способ сделать это.Кнопки для изменения классов с помощью AngularJS ngClick и ngClass

jsfiddle: http://jsfiddle.net/E2GB9/ - не знаю, почему его не делает бутстраповское 100%, но это не имеет значения ..

Когда я использую инструменты для разработчиков, чтобы проверить ng-click после нагрузки он выглядит правильно: ng-click="appliedStyle='example1'" но при нажатии кнопки делает не установлен applyStyle.

HTML:

<body ng-app> 
<div ng-controller="TypeCtrl"> 
<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#source" data-toggle="tab">Test Area</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="source"> 
     <div class="hero-unit" ng-class="appliedStyle"> 
     <h1>H1 Header</h1> 
     <h2>H2 Header</h2> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

    <ul class="unstyled"> 
     <li ng-repeat="style in styles"> 
      <span>Name: {{style.name}}</span><br> 
      <span>H1: {{style.h1}}</span><br> 
      <span>H2: {{style.h2}}</span><br> 
      <span>P: {{style.p}}</span><br> 
      <button class="btn-small" type="submit" ng-click="appliedStyle='{{style.className}}'">Apply {{style.name}}</button> 
     </li> 
    </ul> 
     The Applied Style is : {{appliedStyle}} 
</div>

JS:

function TypeCtrl($scope) { 

$scope.styles = [ 
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}]; 
}

CSS:

.example1 h1{ 
font-size: 10px; 
color: red; 
} 

.example1 h2{ 
font-size: 8px; 
} 

.example1 p{ 
font-size: 6px; 
}

источник

2013-10-15 tehaaron

BTW, 'Прикладной стиль: {{applyStyle}}' остается вне контроллера. Поместите его в 'div' –

@MaximShoustin забыл, что я оставил это там и просто смутил себя, пока не прочитал это и не был таким, как« о дух ». Благодаря! – tehaaron

Используйте сферу»$parent и этот синтаксис:

ng-click="$parent.appliedStyle=style.className"

Работы скрипки: http://jsfiddle.net/cherniv/E2GB9/1/

источник

2013-10-15 19:05:22 Cherniv

Не могли бы вы объяснить, пожалуйста? –

Проверьте это: https://github.com/angular/angular.js/wiki/Understanding-Scopes В принципе, ng-repeat создает новую область для каждого элемента, который он повторяет. Поскольку ваше выражение «applyStyle = '{{style.className}}'" (это может быть просто использованоStyle = style.className, btw) оценивается в одной из этих новых областей, оно будет назначаться только в области дочерних объектов. Если вы хотите исправить это, вы можете применить applyStyle внутри объекта. obj.appliedStyle = style.className. С угловатым вы хотите всегда иметь. в ваших привязках, иначе вы можете столкнуться с проблемами (как в этом случае). – Adam

@ Чернов Спасибо! Мне очень нравится простота этого, но ненавижу использовать '$ parent', поэтому я помещаю его внутри объекта, например, @Adam. – tehaaron

Изменить ваш контроллер, добавив метод, как это:

function TypeCtrl($scope) { 

    $scope.styles = [ 
     {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}]; 
    } 

    $scope.applyStyle = function(style) { 
     $scope.appliedStyle=style.className; 
    } 
}

Тогда просто сделать это в вашем коде:

<button class="btn-small" type="submit" ng-click="applyStyle(style)">

Длинный ответ, что Javascript с embedded {{}} не является допустимым выражением, потому что ng-click использует службу $ parse, которая не обрабатывает синтаксис {{}}. Я бы просто использовал функции, потому что вы хотите поместить свой код в Javascript и вне своих шаблонов. Сохраните свой код.

источник

2013-10-15 19:16:10 chubbsondubs

Ответ разрешает проблему, но объяснение неверно. Ng-click не использует выделенную область, и в этом примере не существует изолированной области.Однако Ng-repeat создает новые дочерние области для каждого элемента, и поскольку его предыдущее выражение оценивалось в дочерней области, значение присваивалось в области дочерних элементов, а не в области контроллера, как и следовало ожидать. В противном случае это хорошее решение. – Adam

@chubbsondubs Спасибо за ответ. На самом деле это именно то, что я имел перед чтением документов AngularJS, и видя пример, который не добавил новую функцию. Я могу вернуться на этот маршрут, так как все усложняется. – tehaaron

Кнопки для изменения классов с помощью AngularJS ngClick и ngClass

ответ

Смежные вопросы