如何使用輸入的值Angular Json填充Table？

Question

我正在使用clickButton函數來根據用戶輸入的值填充表格。 有3個字段可輸入數據。 名，姓，郵編。 如果輸入firstName，請單擊“搜索”，我需要在表中查看關聯的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>

Answer 1

當前，您正在將所有搜索參數綁定到同一個屬性enteredValue 。 相反，您可以將它們分配給單獨的屬性，然后在搜索方法中相應地使用它們：

HTML：

<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
                });
             }
         });
    });
};