gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:36:26 25 4
gpt4 key购买 nike

我正在尝试使表格单元格可点击。单击单元格时,它会将内容从一个单元格切换到另一个单元格。我想通过最终使用 angular.element 获取被点击的元素并将第二个被点击的方 block 设置为等于第一个 clicked.html() 来从这个点击 Action 中制作一个基本的国际象棋游戏。这在 AngluarJs 中是否可能以某种方式使用 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-model 和 ng-bind 来保存变量。我只是迷失了是否或如何让 td 可点击并切换点击显示的位置。谢谢!

注意:忽略此示例中的 test1...我之前使用它来测试从元素中获取 HTML。

最佳答案

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

还有 ng-bind不需要指令,只需使用双大括号将模型绑定(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>

关于javascript - 我正在尝试使用 angularjs 切换表格单元格中的值...我可以使用 ngbind 或 ngmodel 或其他东西吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55939449/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com