Angular JS在ng-repeat中设置被点击对象的值

时间:2016-06-01 18:35:39

标签: javascript angularjs json angularjs-ng-repeat

我有一个ng-repeat,它迭代对象,如:

{
"id": 1,
"title": "Lorem Ipsum",
"base_text": "Lorem ispum",
"read_more_text": "lorem ipsum",
"show_details": false,
"button_label": "Read More",
"button_link": "",
"image": ""
},

在html中的ng-repeat内部,有一个按钮,我想切换该show_details属性的值。

所以,我有一个ng-click处理程序:

<div class="hero-item" ng-repeat="h in dash.heroItems">
    <div>
      <h3>{{h.title}}</h3>
      <p>{{h.base_text}}</p>
      <p ng-if="h.show_details">{{h.read_more_text}}</p>
    </div>
    <div>
      <button ng-click="dash.showHeroDetails(h.id)">{{h.button_label}}</button>
    </div>
  </div>

所以我传递了重复实例的ID属性。但是在这里我被卡住了,我无法获得切换布尔属性的正确语法。

到目前为止,我有这个:

  _this.showHeroDetails = function (item) {
    _this.show_details = item;
  };

这显然是错误的......

2 个答案:

答案 0 :(得分:2)

您只需更新ng-click中的值即可。像这样:

<button ng-click="h.show_details = !h.show_details">{{h.button_label}}</button>

答案 1 :(得分:1)

从模板中传递对象。

<div>
    <button ng-click="dash.showHeroDetails(h)">{{h.button_label}}</button>
</div>

在脚本中,只需切换值。

_this.showHeroDetails = function (item) {
    item.show_details = !item.show_details;
 };