AngularJS。 ng-show，ng-click沒有按按鈕的工作

Question

我有一個表，並希望顯示/隱藏按下按鈕時每列的描述。 我有什麼視覺： the table

正如你在我的HTML看，我宣佈一個按鈕，一個NG單擊作爲這需要一個參數相匹配的NG-顯示的功能。

但按鈕被按下時它什麼也不做，爲什麼？

我的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

沿加一點解釋@a.u.b & xwid

您向您的方法傳遞了一個字符串，並且在該方法中，您訪問了範圍對象的屬性X。

爲了讓範圍使用您的變量作爲您需要使用[]的屬性。它是一個對象的基本問題。

試$範圍[X]，而不是$ scope.x

Answer 2

如果你想參考$scope變量 「X」 請嘗試以下操作：

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

Answer 3

嘗試使用$範圍[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 4

除了已經提供的，我可以提供一個替代的解決方案，以你的問題的答案。我已經改變了一下實現，但它會提供你正在尋找的相同的解決方案。你可以檢查小提琴手here。
我改變了'丁醇'的結構，並將它變成了一個對象的數組對象，它將包含您的按鈕標籤和將用於切換描述的布爾字段。

控制器

$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>