刷新页面内容或仅刷新搜索结果部分，就像在谷歌中一样

Question

擦除在表单控件的输入字段中搜索的查询后，结果仍保留在页面上，直到我刷新页面。有没有办法在清除字段时使内容消失？我在工作时从数据库中提取这些数据

  <div>
    <input id="NDC_Code" type="text" class="form-control" name="name" placeholder="Enter name"
           ng-model="name" autofocus/>
  </div>
  </br></br>
  <div>
    <input id="address" type="text" class="form-control" name="address" placeholder="Enter address"
           ng-model="address" />
  </div>

Answer 1

这是我的方法，但也许有人可能有更好的方法。所以这个想法是有一个这样的搜索按钮：

<button ng-click="getData()" ng-disabled="!showResult()">search</button>

此按钮将获取数据并将布尔标志设为 true，以便您可以知道用户已经搜索过：

$scope.getData = function() {
  // GET DATA
  $scope.results = [{
    name: 'Josh',
    address: '234 nis'
  }, {
    name: 'Chris',
    address: '234 sdf'
  }, {
    name: 'Scott',
    address: '234 nis'
  }, {
    name: 'Pat',
    address: '234 sd'
  }, {
    name: 'Jose',
    address: '234 sd'
  }];

  // USER HAS SEARCHED TO TRUE
  $scope.hasSearched = true;
};

现在，仅当输入包含文本时使用返回布尔值的函数时，您才会显示结果，但在该函数中，您还可以检查用户是否已搜索。 如果用户具有搜索且输入为空，则清除结果变量：

  // RETURNS TRUE OR FALSE IF INPUTS ARE EMPTY AND ALSO CHECKS IF USER HAS SEARCHED TO CLEAR RESULTS
  $scope.showResult = function() {
  if ((!$scope.name && !$scope.address && $scope.hasSearched)) {
    $scope.results = [];
    // USER HAS SEARCHED TO FALSE
    $scope.hasSearched = false;
  }
  return $scope.name && $scope.address;
};

现在，这只是我的 3 秒方法。Plunkr 中的完整代码