Question

我有一个时髦应用程序，我想用它来显示用户输入生成的页面上的单词列表。例如：用户输入字符串'ba'，应用程序生成一个列在本地数据结构中以'ba'开头的所有单词的列表。我想弄清楚的是如何将字符串传递回服务器并返回一个列表。这是$scope变量的用途吗？我想我想弄清楚的是如何实现双向数据绑定...

RestController：

@RestController
@RequestMapping("/api")
public class WordResource {

private final Logger log = LoggerFactory.getLogger(WordResource.class);

@Inject
private TreeService treeService;

/**
 * GET  /words : get all the words.
 *
 * @return the ResponseEntity with status 200 (OK) and the list of words in body
 */
@RequestMapping(value = "/words",
    method = RequestMethod.GET,
    produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List<Word> getAllWords() {
    log.debug("REST request to get all Words");
    return treeService.getAllWords();
}

/**
 * GET  /words : get all the words.
 *
 * @return the ResponseEntity with status 200 (OK) and the list of words in body
 */
@RequestMapping(value = "/ten-words",
    method = RequestMethod.GET,
    produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List<Word> getSubWords(@PathVariable String word) {
    log.debug("REST request to get all Words");
    return treeService.getTenWordsFrom(word);

}
}

HTML

<div ng-cloak>
<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <!--/*@thymesVar id="pageTitle" type=""*/-->
    <title th:text="${pageTitle}">title placeholder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"/>

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

</head>

<body>

<form>
    <div class="form-group">
        <input type="text" name="searchStr" class="form-control" placeholder="Search Words..."/>
    </div>
</form>


<div class="row well">
    <div class="col-md-4">

        <!--word list goes here-->

    </div>
</div>

</body>
</html>

</div>

控制器：

(function() {
'use strict';

angular
    .module('treeWordsApp')
    .controller('HomeController', HomeController);

HomeController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];

function HomeController ($scope, Principal, LoginService, $state) {
    var vm = this;

    vm.account = null;
    vm.isAuthenticated = null;
    vm.login = LoginService.open;
    vm.register = register;

    $scope ({


    });

}
})();

Answer 1

我相信你把这些概念混合了一点。 $ scope用于在客户端级别创建双向数据绑定，这意味着在客户端本地更改的所有内容都在UI上更新，反之亦然。

在创建本地绑定之前，您的客户端（HomeController）必须从某个地方获取数据，在您的情况下，“WordResource”服务。为此，您可以使用AngularJS“$ http”服务： https://docs.angularjs.org/api/ng/service/$http

$ http服务将调用您的Java服务，并将您需要的所有数据返回给控制器。在客户端剩下要做的是在本地$ scope中创建一个变量来保存单词列表，让我们把它称为“wordList”：

$scope.wordList = [];

然后在界面中创建双向绑定，例如，使用“ng-repeat”：https://docs.angularjs.org/api/ng/directive/ngRepeat

ngRepeat将为列表中的每个元素创建指定的HTML元素，例如：

<div ng-repeat="word in wordList">
  <span>{{word}}</span>
</div>

...将为列表中的每个单词创建一个带有子SPAN的DIV。

这会创建一个双向绑定，但这意味着，$ scope中列表的任何更改都将传播到UI，并且UI中的任何更改都将反映在$ scope中。如果要在服务器中更改某些内容，则需要添加一些额外的逻辑来进行API调用并更新资源，这超出了本问题的范围。

总结：

在本地$ scope中创建一个变量来保存单词列表
在UI中创建HTML绑定
每次要更新单词列表时，使用$ http进行API调用，并使用您从服务中获得的单词列表填充$ scope.wordList

希望这有帮助。

AngularJS显示来自其他端点的对象列表？

1 个答案: