Question

我有几个动态放置在ng-repeat中的按钮。我希望能够“选择”一个按钮。我的意思是当我点击一个时，它的CSS会发生变化。当我单击另一个按钮时，第一个按钮会返回其原始CSS，并且新按钮将被选中。任何人都可以帮助我吗？

HTML：

#include<stdio.h>
#include<stdlib.h>
#include<sys/socket.h>
#include<pcap.h>
#include<errno.h>
#include<netinet/in.h>
#include<arpa/inet.h>
#include<string.h>
#include <netinet/if_ether.h> 


int main(int argc, char *argv[])
{

  pcap_t* descr;
  const u_char* packet;
  struct pcap_pkthdr* hdr;

  char* user_input;
  char errbuf[PCAP_ERRBUF_SIZE];
  pcap_if_t* alldevs;
  if(pcap_findalldevs(&alldevs, errbuf) != 0) {
    printf("Error while finding devs\n%s", errbuf);
    exit(1);
  }
  pcap_if_t* d = alldevs;
  while(d != NULL) {
    printf("%s\n", d->name);
    d = d->next;
  }

  scanf("%s", user_input);

  struct in_addr addr;
  int ip, mask;
  int ret = pcap_lookupnet(user_input, &ip, &mask, errbuf);
  addr.s_addr = ip;
  printf("NETWORK: %s \n", inet_ntoa(addr));  

  // =======================================

  descr = pcap_open_live(user_input, BUFSIZ, 0, -1, errbuf);

  if(descr == NULL) {
    printf("Error: %s\n", errbuf);
    exit(1);
  }

  packet = pcap_next(descr, hdr);
  if(packet == NULL) {
    printf("Error, packet is NULL\n");
    exit(1);
  }

  printf("AAAAAAAAAAAAA\n");

  return 0;
}

JS：

<button ng-repeat="answer in regular_answers" ng-attr-id="{{'answer' + answer.regularAnswerId}}" class="button button-balanced button-block" ng-click="selectAnswer(answer)">
      {{answer.answer}}
</button>

Answer 1

使用ng-class指令而不是从控制器执行DOM操作（被视为错误模式）。

<强>标记

<button ng-repeat="answer in regular_answers" 
  ng-attr-id="{{'answer' + answer.regularAnswerId}}" 
  class="button" 
  ng-class="{'button-selected': answer.isSelcted, 'button-balanced': answer.isSelcted}"
  ng-click="answer.isSelected = !answer.isSelected">
      {{answer.answer}}
</button>

<强> PS：为了维护单个Id，您应该将其保留在单个范围变量中。

<button ng-repeat="answer in regular_answers" 
  ng-attr-id="{{'answer' + answer.regularAnswerId}}" 
  class="button" 
  ng-class="{answer.regularAnswerId == selectedAnswerId ? 'button-selected': 'button-balanced'}"
  ng-click="selectAnswer(answer)">
      {{answer.answer}}
</button>

<强>代码

$scope.selectAnswer = function(answer){
   $scope.selectedAnswerId = answer.regularAnswerId 
}

Answer 2

当你使用angular时，方法应该是不同的，你不要在事件之后更改节点，而是节点应该响应数据更改：

<button ng-repeat="answer in regular_answers" class="button button-block" 
  ng-click="selectAnswer(answer)" 
  ng-class = "{buttonSelected:answer.regularAnswerId == selectedAnswer.regularAnswerId, 
             buttonBalanced: answer.regularAnswerId != selectedAnswer.regularAnswerId}">
      {{answer.answer}}
</button>

然后：

$scope.selectAnswer = function (answer) {
    $scope.selectedAnswer = answer;
}

请参阅此示例：http://codepen.io/sergio0983/pen/vyYNvy

修改

添加了另一支具有不同ng-class用例的笔，我认为它更清晰：

http://codepen.io/sergio0983/pen/VmweLP

<button ng-repeat="answer in regular_answers" class="button button-block" ng-click="selectAnswer(answer)" ng-class = "answer.regularAnswerId == selectedAnswer.regularAnswerId ? 'button-selected' : 'button-balanced'">

单击时更改动态按钮的CSS

2 个答案: