javascript - ng-repeat 从 div 添加和删除样式

标签 javascript css angularjs

我有一个关于 ng-repeatng-class 的问题 我有预定义的数据,我从通过 ng-repeat< 运行它的服务器获取 并将它们打印在 div 中,我有一个样式为按钮的另一个 div 我希望能够设置初始 div 说出来nth:child(3) 一个特定的样式,它将从其余部分突出显示它,但如果按下其他 div 的按钮将突出显示转移到它,仍然能够这样做。简而言之,从突出显示的 div 中获取样式并将其转移到点击。

到目前为止,我已经设法做到了这一点。

为了简单起见,我将把代码精简到最低限度。

view.html

<div class="offer__container" ng-repeat="price in settingsPrices" ng-class="{'selected': price.selected}">
//Omited code
    <div class="offer__container__cta" ng-click="select(price)">Select
    </div>
</div>

ViewCtrl.js

//Omitted code

$scope.select = function(price) {
    price.selected = !price.selected;
}

stlye.css

//Omitted

.selected {
    background-color: red;
    font-size: 3em;
}

在当前状态下,div 样式为按钮,单击时会将更改应用于父级 div,随后单击它会取消样式。我现在只需要让它独一无二的方法,所以如果先说 div 被点击,它就会有样式,但如果点击第 4 个,它应该从第一个开始取消样式并将其应用到第 4 个,依此类推...

最佳答案

<div ng-repeat = "price in settingsPrices">

<div ng-class="$index == seletedDiv ?'selected':''" ngclick="select($index)">select {{price}}</div>

</div>

$scope.seletedDiv = 0;
$scope.select = function(index) {
  $scope.seletedDiv = index;
}

 Hope this works for u.

关于javascript - ng-repeat 从 div 添加和删除样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44915232/

相关文章:

jquery - 在任何屏幕尺寸下将 div 向右浮动,边距向右

css - 可拉伸(stretch)、固定、居中的墙纸?我很接近...真的很接近

javascript - Jquery Mobile 并排输入

javascript - 安装 ng-mouseover 和 ng-mouseout 会导致 AngularJS 代码效率极低

javascript - 什么可能导致相同的 .json 后调用出现 406?

javascript - 使用正则表达式在较大字符串的开头查找字符串模式?

javascript - 静态布局与 jQuery wrapInner - 不同的输出

javascript - 使用 ajax 将 img id 发送到另一个文件

javascript - Focus() 在使用 ios 10 safari 浏览器的 ionic 中不起作用

javascript - 删除 angularjs 后列表不更新