Question

我有一张桌子，每行显示一个按钮。我有一个要求，我必须在这些行中有条件地显示具有不同状态的按钮。因此，我认为每个按钮都使用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函数的返回值。我可以在开发人员工具中看到，该函数现在返回了一个不同的值，但是视图没有得到更新。

您能告诉我我在做什么错吗，还是有更好的方法来实现这一目标？

Answer 1

因此，从我的问题出发，我的理解是，您需要在表中每一行的级别设置一个变量，并更新函数中的所有行。

我假设您正在使用ng-repeat创建行。您可以使用可信任的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-show按钮表单元格

1 个答案: