I am trying to switch values in table cells using angularjs… can i use ngbind or ngmodel or something else?

I am trying to make a table cell clickable. When the cell is clicked it will switch the contents from one cell to another. I want to make a basic chess game out of this click action by eventually using angular.element to get the clicked elements and setting the second clicked square equal to the first clicked.html(). Is this possible in AngluarJs using a MEAN somehow?

My current code looks like this but the table cell isn’t changing or doing anything when I click.

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>

Obviously I am missing something but I have tried adding to a DB and pulling it back out. I have tried ng-model and ng-bind for holding the variables. I am just lost on if or how I can get the td to be clickable and also switch where what is clicked displays. Thanks!

NOTE: disregard test1 in this example… I was using that earlier for testing getting the HTML out of the element.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

The HTML doesn’t need the <a> tag. Simply set the CSS style to cursor: pointer.

Also the ng-bind directive isn’t necessary, simply bind model to HTML with double brace {{ }} expressions.

The DEMO

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>

Solution 2

Okay, I try to figure out one solution that might work for you too.

I am adding code snippet have a look:

Main challange, that you are facing is, ng-bind,
have a look to this article and find the sole purpose of 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>

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply