我正在尝试使用AngularJS在表单元格中切换值..我可以使用ngbind或ngmodel或其他东西吗?

我正在尝试使表单元单击。单击单元格时，它将将内容从一个单元格切换到另一个单元格。我想通过最终使用Angular.Element获取点击元素并将第二个点击的正方形设置为等于第一个单击的html((，从而从此点击操作中制作基本的国际象棋游戏。这在gangluarjs中是否可以使用平均值？

我当前的代码看起来像这样，但是当我单击时，表单元格没有更改或做任何事情。

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绑定来持有变量。我只是迷失了是否或如何使TD可单击，也可以切换点击显示的内容。谢谢！

注意：在此示例中无视test1 ...我较早地使用了该测试来将HTML从元素中取出。

HTML不需要<a>标签。只需将CSS样式设置为cursor: pointer。

也不需要ng-bind指令，只需将模型绑定到HTML，用双支架{{ }}表达式将模型绑定到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>

好吧，我试图找出一个可能对您有用的解决方案。

我正在添加代码片段，请查看：

主要的挑战，您面临看看这篇文章，找到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>

演示

相关内容

最新更新

热门标签：