如何让JavaScript从HTML而不是硬编码数据中读取？

这是我的密码

html:

到目前为止，我可以在一个框中输入，它将只返回与文本匹配的国家。 我想做一些事情。首先，如上所示，国家列表硬编码到javascript中。如果html文件中有一个标准无序列表，如下所示：

<ul id="countryList">
    <li>Argentina</li>
    <li>Brazil</li>
    <li>Chile</li>
    <li>Colombia</li>
    <li>Paraguay</li>
    <li>Panama</li>
    <li>Andorra</li>
</ul> 

如何让脚本使用这些数据，而不是将其硬编码到JS中。 另一个较小的查询是如何让js执行不同的模式。例如，如果我现在输入'a'，则返回所有输入了'a'的国家/地区。但我只希望在这种情况下返回以A开头的国家

---

谢谢

基本上，如果您为此使用angularjs，我会采取不同的做法：

为国家服务对他的主题有一个很好的介绍 然后将数组添加到服务中，或者使用$http并创建一个.json文件，用于管理国家/地区列表 在您的控制器中继承服务 给国家打电话，让。。。哪个返回列表 对于您的过滤器： 如果您想要100%匹配，您可以使用true作为过滤器的第二个参数

<ul>
  <li ng-repeat="x in countryList | filter:test:true">
    {{ x.country }}
  </li>
</ul>

否则，您必须编写一个过滤函数，例如docs:，：

编辑：这是一个jsbin工作：

---

我的错误是使用$scope，你必须使用$app。更新的代码示例

首先，必须在某个地方定义数据。至少在数据库中，或者您可以生成此数据。无论哪种方式，只要您获得应用程序外部的数据，对您来说，它都是动态的

所以您可以创建.json文件并以相同的方式获取它，我已经调用了URL来获取数据。我之所以移动数据检索，是为了让您可以在应用程序的其他地方重用代码。在开发角度应用程序时，这是一个很好的实践

为了实现您的“开始”行为，我实现了一个过滤器，如下所述

我已经实现了一个完整的例子。因为这对我学习也很好。下面是我创建的过滤器的用法

<ul>
    <li ng-repeat="user in users | startsWith:searchText | orderBy: 'name' ">
        {{user.name}} | {{user.company.name}}
    </li>
</ul>

---

所以，您希望在DOM标记中有一个硬编码列表，然后用JS读取它？首先为什么要使用angularjs？->你可以用jQuery或Vanillajs来做这件事。这个答案很好，在我标记它之前还有一件事。我在哪里可以找到$scope.myFilter呢。我已经把它放在我的js代码中了，但到目前为止，它还没有被更新，因为它以前是一种原型，这里是jsbin

<ul>
  <li ng-repeat="x in countryList | filter:test:true">
    {{ x.country }}
  </li>
</ul>

<ul>
  <li ng-repeat="x in countryList | myFilter:test">
    {{ x.country }}
  </li>
</ul>

app.filter("myFilter", function(){
  return function(items, test){
      var returnItems = items;
       if(test === "") {
         returnItems = items;
       }
    else {
      returnItems = items.filter(function(element, index,array) {
        if(element.country.indexOf(test) !== -1)
        return true;
      });
    }
    return returnItems;
  };
});

<ul>
    <li ng-repeat="user in users | startsWith:searchText | orderBy: 'name' ">
        {{user.name}} | {{user.company.name}}
    </li>
</ul>