AngularJS。 ng-show，ng-click 不能作为按下按钮

Question

我有一个 table 并且想要在按下按钮时 show/hide 每列的描述。 我的目测： the table

正如您在我的 html 中看到的那样，我将带有 ng-click 的按钮声明为一个函数，该函数接受一个参数来匹配 ng-show。

但是当按下按钮时它没有任何反应，为什么？

我的html:

<table>
<tr>
    <td><strong>Data</strong></td>
    <td><strong>tempmin</strong></td>
    <td><strong>tempmax</strong></td>
    <td><strong>umiditatea</strong></td>
    <td><strong>presiunea</strong></td>
    <td><strong>vitezavint</strong></td>
    <td><strong>nori</strong></td>
</tr>
<tr ng-repeat="md in chisinau.list">
    <td class='td'><span ng-show='buton0'>
    {{md.dt * 1000 | date:"MM.dd"}}</span></td>
    <td class='td'><span ng-show='buton1'>
    {{md.temp.min}}</span></td>
    <td class='td'><span ng-show='buton2'>
    {{md.temp.max}}</span></td>
    <td class='td'><span ng-show='buton3'>
    {{md.humidity}}%</span></td>
    <td class='td'><span ng-show='buton4'>
    {{md.pressure}}</span></td>
    <td class='td'><span ng-show='buton5'>
    {{md.speed}}</span></td>
    <td class='td'><span ng-show='buton6'>
    {{md.clouds}}</span></td>
</tr>
<tr>
    <td ng-repeat='buton in butoane track by $index'>
    <button ng-click="fbuton('buton'+$index)">{{buton}}</button>
    </td>
</tr>

我的controller.js:

    $http.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=Chisinau&mode=json&units=metric&cnt=10&appid=6fa04faec9c89ba8cf92dd1f76e7d518')
    .success(function(response){
        $scope.chisinau = response;
    });

    $scope.butoane = [
    'buton-data',
    'buton-tempmin',
    'buton-tempmax',
    'buton-umidiatea',
    'buton-presiunea',
    'buton-vitezavint',
    'buton-nori'
    ];

    $scope.buton0 = true;
    $scope.buton1 = true;
    $scope.buton2 = true;
    $scope.buton3 = true;
    $scope.buton4 = true;
    $scope.buton5 = true;
    $scope.buton6 = true;

    $scope.fbuton = function(x){
         $scope.x = $scope.x == true ? false : true;

    }

Answer 1

如果您想引用 $scope 变量 "x"，请尝试以下操作：

$scope[x] = $scope[x] == true ? false : true;

Answer 2

尝试使用 $scope[x]

$scope.fbuton = function(x){
     $scope[x] = $scope[x] == true ? false : true;
}

或（我不确定 $eval）

$scope.fbuton = function(x){
     $scope.$eval(x) = $scope.$eval(x) == true ? false : true;
}

Answer 3

添加一些解释以及 @a.u.b & xwid

您向您的方法传递了一个字符串，并且在该方法中，您访问了作用域对象 x 的属性。

为了让作用域将您的变量用作属性，您需要使用 [ ]。这是对象中的一个基本问题。

试试 $scope[x] 而不是 $scope.x

Answer 4

连同已经提供的答案，我可以为您的问题提供替代解决方案。我对实现做了一些更改，但它会提供与您正在寻找的相同的解决方案。你可以查看fiddler here。
我已经更改了 'butoane' 的结构，并将其变成对象的数组对象，其中将包含您的按钮标签和一个用于切换描述的布尔字段。

控制器

$scope.butoane = [{
    label: 'buton - data ',
    show: true
  }, {
    label: 'buton - tempmin ',
    show: true
  }, {
    label: 'buton - tempmax ',
    show: true
  }, {
    label: 'buton - umidiatea ',
    show: true
  }, {
    label: 'buton - presiunea ',
    show: true
  }, {
    label: 'buton - vitezavint ',
    show: true
  }, {
    label: 'buton - nori ',
    show: true
  }];

  $scope.fbuton = function(x) {
    x.show = !x.show;
  }

HTML

<table>
    <tr>
      <td><strong>Data</strong></td>
      <td><strong>tempmin</strong></td>
      <td><strong>tempmax</strong></td>
      <td><strong>umiditatea</strong></td>
      <td><strong>presiunea</strong></td>
      <td><strong>vitezavint</strong></td>
      <td><strong>nori</strong></td>
    </tr>
    <tr ng-repeat="md in chisinau.list">
      <td class='td'><span ng-show='butoane[0].show'>
    {{md.dt * 1000 | date:"MM.dd"}}</span></td>
      <td class='td'><span ng-show='butoane[1].show'>
    {{md.temp.min}}</span></td>
      <td class='td'><span ng-show='butoane[2].show'>
    {{md.temp.max}}</span></td>
      <td class='td'><span ng-show='butoane[3].show'>
    {{md.humidity}}%</span></td>
      <td class='td'><span ng-show='butoane[4].show'>
    {{md.pressure}}</span></td>
      <td class='td'><span ng-show='butoane[5].show'>
    {{md.speed}}</span></td>
      <td class='td'><span ng-show='butoane[6].show'>
    {{md.clouds}}</span></td>
    </tr>
    <tr>
      <td ng-repeat='buton in butoane'>
        <button ng-click="fbuton(buton)">{{buton.label}}</button>
      </td>
    </tr>
  </table>

AngularJS。 ng-show，ng-click 不能作为按下按钮

AngularJS. ng-show, ng-click not working as pressing button

javascript

angularjs

controller

angularjs-ng-click

ng-show