Question

我想扩展一个WC3角度教程，该教程将转到数据库并获取格式结果集以显示在屏幕上的表格中。教程在这里：https://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_sql

我想要添加的是一个输入框，允许我输入要在asp页面中的sql查询查询中使用的起始字母。所以我会将文本框中的内容传递给sql然后刷新表结果，只输入以输入的字符开头的单词：

这是我的代码，我无法弄清楚如何连接输入字段以刷新表格。 $ Scope.myWord不起作用。有人可以帮忙吗？

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>

<body ng-app="myApp" style="margin: 20px;">

<h4>Add Hangman Word</h4>

<form method='post' action='modify.asp' name='theForm' id='theForm' onsubmit="return vForm();">
<div ng-controller="wordsCtrl">
<input type='hidden' name='addhangmanword' value='1' />
<b>Add word:</b><br />
<input class="form-control" style='width:250px;' ng-model="myWord" name="word" id="word" type="text" /><br />
<input class="btn" style="border: 1px solid black; display: inline;" type='submit' value='Submit' />

<br /><br />
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>

</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
var strBegin = $scope.myWord;
if (strBegin != "") {
ajaxURL = ajaxURL + "?w=" + strBegin;
}
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});

</script>

</body>
</html>

更新解决问题的代码部分：

<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter: myWord">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>

<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});

</script>

将onchange事件添加到WC3 AngularJS教程中

0 个答案: