Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/448.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用输入的值填充表?_Javascript_Json_Angularjs_Jsp_Angularjs Ng Repeat - Fatal编程技术网

Javascript 如何使用输入的值填充表?

Javascript 如何使用输入的值填充表?,javascript,json,angularjs,jsp,angularjs-ng-repeat,Javascript,Json,Angularjs,Jsp,Angularjs Ng Repeat,我正在使用clickButton函数,根据用户输入的值填充表格。有3个字段可输入数据。名字,姓氏,邮编。如果我键入firstName,单击search,我需要在表中查看相关的JSON数据。lastName和zipCode也是这样。当我设置$scope.results=data时,将根据输入的firstName值正确填充该表。我试图为其他两个字段添加条件,然后将结果推送到jsp。我做错了什么 JS $scope.results = []; $scope.clickButton = function

我正在使用clickButton函数,根据用户输入的值填充表格。有3个字段可输入数据。名字,姓氏,邮编。如果我键入firstName,单击search,我需要在表中查看相关的JSON数据。lastName和zipCode也是这样。当我设置$scope.results=data时,将根据输入的firstName值正确填充该表。我试图为其他两个字段添加条件,然后将结果推送到jsp。我做错了什么

JS

$scope.results = [];
$scope.clickButton = function(enteredValue) {
    $scope.items=this.result;
    var url = 'http://localhost:8080/application/names/find?firstName='+enteredValue+'&lastName='+enteredValue+'&zipCode='+enteredValue
    $http.get(url).success(function(data){
        angular.forEach($scope.items, function (item) {
            if(items.first_nm === enteredValue || items.last_nm ==enteredValue || items.zip_cd == enteredValue){
                 $scope.results.push({
                     firstName: item.first_nm,
                     lastName: item.last_nm,
                     zipCode: item.zip_cd
                 });
             }
         })
    })
   }; 
JSP

  <input id="firstName" name="firstName" type="text" data-ng-model="enteredValue" /> 
  <input id="lastName" name="lastName" type="text" data-ng-model="enteredValue" /> 
  <input id="zipCode" name="zipCode" type="text" data-ng-model="enteredValue" /> 

 <button class="btn btn-primary" data-ng-click='clickButton(enteredValue)'>Search</button>

 <tr data-ng-repeat="result in results" class="text-center">

 <td data-title="'ID'" >{{result.firstName}}</td>

 <td data-title="'Name'" >{{result.lastName}}</td>

  <td data-title="'Status'" >{{result.zipCode}}
  </td>

搜寻
{{result.firstName}
{{result.lastName}
{{result.zipCode}

当前,您正在将所有搜索参数绑定到同一个属性-
输入值
。相反,您可以将它们指定给单独的属性,然后在搜索方法中相应地使用它们:

HTML:


您的单击和搜索条件字段在视图中的何处?单击和搜索字段已添加。dotnetom,感谢您的反馈。我遵循了你的步骤,但由于某种原因,数据没有显示在表上。我可以在控制台中查看Json数据。另外,当我尝试用firstName空搜索lastName时,我根本不返回任何json数据。这就是问题所在吗$scope.items=this.result;
<input id="firstName" name="firstName" type="text" data-ng-model="enteredValue.firstName" /> 
<input id="lastName" name="lastName" type="text" data-ng-model="enteredValue.lastName" /> 
<input id="zipCode" name="zipCode" type="text" data-ng-model="enteredValue.zipCode" /> 

<button class="btn btn-primary" data-ng-click='clickButton(enteredValue)'>Search</button>
$scope.clickButton = function(enteredValue) {
    $scope.items=this.result;
    // instead of enteredValue use enteredValue.lastName and other properties
    // If your API allows it, you can even add the value only if it exists,
    // not always as it is done currently
    var url = 'http://localhost:8080/application/names/find?firstName='+
            enteredValue.firstName+'&lastName='+
            enteredValue.lastName+'&zipCode='+enteredValue.zipCode
   $http.get(url).success(function(data){
        angular.forEach($scope.items, function (item) {
            if(items.first_nm === enteredValue || items.last_nm ==enteredValue || items.zip_cd == enteredValue){
                $scope.results.push({
                    firstName: item.first_nm,
                    lastName: item.last_nm,
                    zipCode: item.zip_cd
                });
             }
         });
    });
};