Question

我遇到使用angularjs自动输出数据的问题。 angular的一个很酷的功能是双向数据绑定。我无法使用json文件绑定输入。我想要做的是，如果用户输入与键，输出键匹配，则使用双向数据绑定自动匹配。当用户删除他的选择时，输出或视图也会改变。我可以使用按钮ng-click指令获得正确的结果。任何帮助，将不胜感激。

我想做什么： 1.if输入匹配包含json信息的链接，使用双向数据绑定自动输出该信息。不应单击任何按钮以获取信息。 3.当我删除用户输入时，输出数据也将被删除。

  <!DOCTYPE html>
  <html lang="en" ng-app="app">
  <head>
  <script    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<meta charset="UTF-8">
<title>Pokedex</title>
<!--Angular STYLE SHEET-->
<link rel="stylesheet" href="Content/angular-material.min.css" />



 </head>
<body ng-controller="ctrl">
<md-toolbar class="md-padding">
    <div class="md-toolbar-tools">
        <h1 class="md-flex"><strong> Angular DM</strong></h1>
    </div>
    <md-nav-bar nav-bar-aria-label="navigation links">
        <a href="index.html">Movie Database</a>
        <a href="input_Control.html">Pokedex</a>
    </md-nav-bar>
    <!--INPUT-->


            <input ng-model="search" type="text" placeholder="Enter Pokemon Name" ng-click="deleting()">
            <button ng-click="findValue(search)">Search</button>
            <span> {{search | lowercase}}</span>


    <div>
        <table>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Image</th>
            </tr>
            <tr ng-repeat="x in results">
                <td></td>
                <td ng-model="key">
                    {{ $index+1 + x.Name | lowercase}}
                </td>
                <td>
                    <img ng-model="image" ng-src="{{x.Image}}">
                </td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl', function ($scope, $http) {
            $http.get("https://raw.githubusercontent.com/dmedina0217/pokedex/master/pokemon-images.json").then(function (response) {
                $scope.images = response.data;
                $scope.results = [];
                $scope.findValue = function (search) {

                    angular.forEach($scope.images, function (value, key) {
                        if (key === search) {
                            $scope.results.push({ Name: key, Image: value }).$filter(lowercase);

                        }
                    });
                };
                $scope.deleting = function () {
                    $scope.search = null;

                }
            });


        });
    </script>
    <!-- Angular Material Script START-->
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-animate.min.js"></script>
    <script src="scripts/angular-aria.min.js"></script>
    <script src="scripts/angular-messages.min.js"></script>
    <script src="scripts/angular-material/angular-material.min.js"></script>
    <!-- Angular Material Script END-->

Answer 1

我想在此注意一些事项。首先，吸虫：https://plnkr.co/edit/IgcuE2fKlqPcT9ZV9GQ5

你的脚本/ css引用指向相对路径，所以我只是抓住了你从plunker使用的库的最新版本。您所看到的可能不是您想要看到的，但这是您从所提供的内容中获得的最佳效果。
包含神奇宝贝列表的响应是一个对象，而不是一个数组。您可以使用ng-repeat迭代对象，但不能在对象上使用filter指令。因此，我修改了您的findValue方法，以便创建一个将与ng-repeat一起使用的新数组。我删除了if (key === search)检查，因为您可以使用filter: search指令来过滤数组。此搜索将是实时的，并且只要输入框中的值发生更改，就会立即执行此搜索。
ng-model仅绑定到input，select和textarea，因此<td>上没有这些内容。见这里：https://docs.angularjs.org/api/ng/directive/ngModel
我不确定你对＃3的意思。（顺便说一下，＃2缺失）如果你想清空results数组，只需在$scope.results = []方法中设置ng-click，你就可以了。

Answer 2

根据您的要求完美运作。 @yourrock 给出的另一个答案只是对json集合的过滤，它不是双向绑定。

 <!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <meta charset="UTF-8">
  <title>Pokedex</title>



</head>

<body ng-controller="ctrl">
  <md-toolbar class="md-padding">
    <div class="md-toolbar-tools">
      <h1 class="md-flex"><strong> Angular DM</strong></h1>
    </div>
    <md-nav-bar nav-bar-aria-label="navigation links">
      <a href="index.html">Movie Database</a>
      <a href="input_Control.html">Pokedex</a>
    </md-nav-bar>
    <!--INPUT-->


    <input ng-model="search" type="text" placeholder="Enter Pokemon Name" data-ng-change="findValue(search)" ng-keydown="removeTagOnBackspace($event)"  ng-click="deleting()">
    <!--   <button ng-change="findValue(search)">Search</button> -->
    <span> {{search | lowercase}}</span>


    <div>
      <table>
        <tr>
          <th>No.</th>
          <th>Name</th>
          <th>Image</th>
        </tr>
        <tr ng-repeat="x in results">
          <td></td>
          <td ng-model="key">
            {{  x.Name | lowercase}}
          </td>
          <td>
            <img ng-model="value" ng-src="{{x.Image}}">
          </td>
        </tr>
      </table>
    </div>

    <script>
      var app = angular.module('app', []);
      app.controller('ctrl', function($scope, $http) {



      $scope.getResult=function(){
        $http.get("https://raw.githubusercontent.com/dmedina0217/pokedex/master/pokemon-images.json").then(function(response) {
          $scope.images = response.data;
          console.log($scope.images)

          $scope.results = [];



          $scope.findValue = function(search) {

            angular.forEach($scope.images, function(value, key) {
              debugger
              if (key == search) {
                $scope.results.push({
                  Name: key,
                  Image: value
                }).$filter(lowercase);

              }


            });
            console.log($scope.results)
          };
          $scope.removeTagOnBackspace = function (event) {
    if (event.keyCode === 8) {
    $scope.results=[];

        console.log('here!');
    }
};
          $scope.deleting = function() {
            $scope.search = null;

          }
        });

}
$scope.getResult();
      });
    </script>
    </body>
    </html>

AngularJS双向数据绑定输入匹配json文件

2 个答案: