Я пытаюсь переключать значения в ячейках таблицы, используя angularjs ... Могу ли я использовать ngbind или ngmodel или что-то еще? - PullRequest
Новая
       3

Я пытаюсь переключать значения в ячейках таблицы, используя angularjs ... Могу ли я использовать ngbind или ngmodel или что-то еще?

2 голосов
/ 01 мая 2019

Я пытаюсь сделать ячейку таблицы кликабельной.При щелчке по ячейке содержимое переключается с одной ячейки на другую.Я хочу сделать из этого действия щелчка основную шахматную игру, в конечном итоге используя angular.element, чтобы получить элементы, по которым щелкнули, и установив второй квадрат щелчка, равный первому clicked.html ().Возможно ли это как-то в AngluarJ, использующих MEAN?

Мой текущий код выглядит так, но ячейка таблицы не меняется или ничего не делает, когда я нажимаю.

app.controller('ChessCtrl' , ['$http', '$scope', '$document', function 
  ChessCtrl($http, $scope, $document) {
  var vm = this;
  vm.test1 = angular.element(document.getElementById("A1")); 
  vm.test2 = "";
  vm.test3 = "This is a test";

  $scope.click = function() {
    var temp = vm.test3;
    vm.test2 = temp;
    vm.test3 = "";
  }

  }]);

<div ng-Controller="ChessCtrl">
<div class="content">
<div class="left">
  <table style="width: 75%">
    <tr>
    <td id="A1" ><a ng-bind="vm.test3" ng-click="click()"></a></td>
    <td class="grey" ng-bind="vm.test2"><a ng-bind="vm.test2" ng-click="click()"></a>
    </td>
    <td>
    </tr>
  </table>
</div>
</div>
</div>

Очевидно, я что-то упустил, но я попытался добавить в БД и вытащить ее обратно.Я пробовал ng-модель и ng-bind для хранения переменных.Я просто заблудился, если или как я могу сделать так, чтобы тд был кликабельным, а также переключаться, где отображается то, что нажимается.Спасибо!

ПРИМЕЧАНИЕ: не обращайте внимания на test1 в этом примере ... Я использовал это ранее для тестирования получения HTML из элемента.

Ответы [ 2 ]

1 голос
/ 01 мая 2019

HTML не нуждается в теге <a>. Просто установите стиль CSS на cursor: pointer.

Также директива ng-bind не требуется, просто свяжите модель с HTML с помощью выражений {{ }} с двойной скобкой.

ДЕМО 

angular.module("app",[])
.controller('ChessCtrl' , function () {
  var vm = this;
  vm.test2 = "♔";
  vm.test3 = "test";

  vm.switch = function() {
    var temp = vm.test2;
    vm.test2 = vm.test3;
    vm.test3 = temp;
  }
});
.red  { background-color: red; }
.grey { background-color: grey; }
td {
  width: 20%;
  cursor: pointer;
  font-size: 24pt;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ChessCtrl as vm">
  <table>
    <tr>
      <td class="red"  ng-click="vm.switch()">{{vm.test3}}</td>
      <td class="grey" ng-click="vm.switch()">{{vm.test2}}</td>
    </tr>
  </table>
</body>
0 голосов
/ 01 мая 2019

Хорошо, я пытаюсь найти одно решение, которое может работать и для вас.

Я добавляю фрагмент кода, посмотрите:

Главный вызов, с которым вы сталкиваетесь, это нг-бинд, взгляните на эту статью и найдите единственную цель ng-bind

https://www.w3schools.com/angular/ng_ng-bind.asp

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


  <table style="width: 75%">
    <tr>
    <td id="td1" ><a ng-bind="link1" ng-click="clickMe()"></a></td>
    <td id="td2" class="" ><a  ng-bind="link2" ng-click="clickMeAgain()"></a>
    </td>
    <td>
    </tr>
  </table>

</div>
<script>
var clickMeIsClicked = false;
var clickMeAgainIsClicked = false;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.link1 = 'Click me to show td2';
    $scope.link2 = ' I always want to be visible, thanks td1';
    $scope.count = 0;
    $scope.myFunction = function() {
        $scope.count++;
    }
    
    $scope.clickMe = function(){
    	if(!clickMeIsClicked){
          $scope.link2 = 'Click me to show td2';
          $scope.link1 = ' I always want to be visible, thanks td1';
          clickMeIsClicked = true;
		}
        else{
        	$scope.link1 = 'Click me to show td2';
    		$scope.link2 = ' I always want to be visible, thanks td1';
          	clickMeIsClicked = false;
        }
    }
    
    $scope.clickMeAgain = function(){
    	
    }
    
});
</script> 

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...