AngularJs, ng-显示按钮 table 单元格

Question

我有一个 table，每行显示一个按钮。我有一个要求，我必须有条件地在这些行中显示具有不同状态的按钮。所以在我看来，我对每个按钮都使用了 ng-show。

<table> 
  <tr>
    <td>row1 col1</td>
    <td>
      <button ng-show="!func1(param1,param2)" >
      <button ng-show="func1(param1,param2)">
    </td>
  </tr>
  <tr>
    <td>row2 col2</td>
    <td>
      <button ng-show="!func1(param1,param2)" >
      <button ng-show="func1(param1,param2)">
    </td>
  </tr>
</table>

在我的 .js 文件中：

$scope.func1 = function(p1,p2) {
    if(p1 === 'A' && p2 === 'B') {
      return true;
    } else {
      return false;
    }
}

现在控制器中有另一个函数更改 ng-show 函数的 return 值。我可以在开发人员工具中看到该函数现在 return 是一个不同的值，但视图没有得到更新。

你能告诉我这里做错了什么或者有更好的方法来实现这个吗？

Answer 1

所以根据你的问题，我的理解是，你需要在 table 中的每一行级别设置一个变量，并从一个函数更新所有行。

我假设您正在使用 ng-repeat 创建行。您可以使用 trusty ng-if 来创建一个新的范围，这样，当在单个行上发生变量更新时，变量更新将单独隔离到该行，而不会传播到其他行。执行此操作的代码是。

<tr ng-repeat="item in items" ng-if="true">
      <td>row{{$index+1}} col{{$index+1}}</td>
      <td>
      <button ng-show="showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = false;">A</button>
      <button ng-show="!showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = true;">B</button>
</td>

这种方法的优点是，当您从控制器更新变量时，我们可以使用单个变量赋值更新所有行。下面是执行变量更新的函数。

  $scope.showB = function(){
    $scope.showThis = false;
  }
  $scope.showA = function(){
    $scope.showThis = true;
  }

简单地说，来自父作用域（控制器）的更新将传播到所有子作用域（ng-if 创建的新作用域），但子作用域更新不会传播！

下面是一个简单的例子来证明这一点！

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
$scope.showThis = true;
 $scope.items = [1,2,3,4,5];
  $scope.p1 = 'A';
  $scope.p2 = 'B';
  $scope.showB = function(){
   $scope.showThis = false;
  }
  $scope.showA = function(){
   $scope.showThis = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <table>
    <tr ng-repeat="item in items" ng-if="true">
      <td>row{{$index+1}} col{{$index+1}}</td>
      <td>
      <button ng-show="showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = false;">A</button>
      <button ng-show="!showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = true;">B</button>
    </td>
  </tr>
</table>
<button ng-click="showA()">show A</button>
<button ng-click="showB()">show B</button>
</div>

AngularJs, ng-显示按钮 table 单元格

AngularJs, ng-show button table cell

javascript

html-table

cell

ng-show