Nano Hash - криптовалюты, майнинг, программирование

изменить цвет на тот же угловой элемент

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

<div ng-app="myApp" ng-controller="myCtrl as model">
   <button ng-click="model.addComparative()"> add
        </button>  
 <div ng-repeat="item in model.items track by $index">
   <button ng-model="model.myModel" ng-click="model.changeColor()" ng-class="{'red':model.myModel==true}">click me</button>
</div> 

 angular
    .module("myApp",[])
    .controller('myCtrl', function($scope){
        var model=this;
        model.myModel=false;
        model.items=[];
        model.newItems = '';
        model.addComparative = function(){
            model.items.push(model.newItems)
        }
        model.changeColor = function(){
            model.myModel = true;
        }
  })

и codepen: http://codepen.io/fernandooj/pen/rrdZWE

angularjs ng-class angularjs-scope
08.10.2016

  • из-за вашей модели кнопки. Что на самом деле вы хотите сделать? 09.10.2016

Ответы:


1

Попробуйте использовать текущий индекс каждого элемента:

html-файл

<button ng-model="model.myModel" ng-click="model.changeColor(item)" ng-class="{'red':item.selected==true}">click me</button>

JS-файл

model.addComparative = function(){
    model.items.push({}); // What you append needs to be an object.
}
model.changeColor = function(item){
    item.selected = true;
};
08.10.2016
  • если вы меняете свойство этого элемента, проще передать весь элемент, чем индексировать функцию. Особенно, если используются какие-либо фильтры, потому что фильтры сбрасывают индексацию 09.10.2016
  • У меня другой вопрос, возможно ли, что значение индекса Begin в другом числе равно нулю? 09.10.2016
  • Хорошо @charlietfl, я отредактировал в соответствии с вашим комментарием. 13.10.2016

    • 2

    просто используйте

    <button ng-model="model.myModel" 
        ng-click="this.item.red=true" 
        ng-class="{'red':this.item.red}">click me</button>

    $index ng-repeat может меняться в зависимости от цикла дайджеста (если элементы не упорядочены), поэтому он ненадежен.

    добавление набора из 3 кнопок при каждом нажатии кнопки «ДОБАВИТЬ» и использование JS onclick:

    <div ng-app="myApp" ng-controller="myCtrl as model" ng-init="range=[0, 1, 2]">
  <button ng-click="model.addComparative()"> add </button>  
  <div ng-repeat="item in model.items track by $index+3">
    <button ng-repeat="i in range" 
            ng-model="model.myModel1" 
            onclick="this.style.background = 'red'">click me</button>
  </div>
</div>

    также обратите внимание, что все ваши кнопки имеют одинаковую ngModel, возможно, это нежелательно

    08.10.2016
  • спасибо за ваш ответ, я тестировал ваше решение, но если бы было больше кнопок, для каждого добавления, и мне нужно изменить цвет только той кнопки, которую я нажал, посмотрите: codepen.io/fernanooj/pen/rrdZWE 09.10.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..