AngularJs, ячейка таблицы кнопок ng-show

У меня есть таблица, в каждой строке которой отображается кнопка. У меня есть требование, когда я должен условно отображать кнопку с разными состояниями в этих строках. Итак, на мой взгляд, я использовал 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. В инструментах разработчика я вижу, что функция теперь возвращает другое значение, но представление не обновляется.

Не могли бы вы посоветовать, что я делаю неправильно здесь, или есть лучший способ добиться этого?


javascript html-table cell ng-show
person RJD    schedule 13.08.2018    source источник
comment
рекомендовал бы присвоить возвращаемое значение переменной Scope и поместить эту переменную в ng-show, например: ng-show=isButtonShow on function $scope.func1 = function(p1, p2) { //Если условие $scope.isButtonSow = истинный }   -  person kishorekumaru    schedule 13.08.2018
comment
значения параметров различны для каждой строки. Так что это должно быть выполнено для каждой строки. Если я сделаю его переменным, как мне выполнить его для каждой строки?   -  person RJD    schedule 13.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Итак, из вашего вопроса я понимаю, что вам нужно установить переменную на уровне каждой строки в таблице, а также обновить все строки из функции.

Я предполагаю, что вы используете 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>

person Naren Murali    schedule 13.08.2018
comment
спасибо за предложение и подробное объяснение - person RJD; 13.08.2018
comment
Да. Я также попробовал свой исходный код с вызовом $scope.apply(), который, кажется, обновляет уровень строки ng-show - person RJD; 14.08.2018
comment
@RJD Хорошо, просто проверьте консоль на наличие digest ошибок при использовании $apply() - person Naren Murali; 14.08.2018