Javascript 使用相同的模式在AngularJS中添加/编辑

我是使用AngularJS的新手

我正在做一个基本的项目，我有一个国家的积垢

代码运行良好，但我有一个问题，我想使用相同的模式添加或编辑一个国家，问题是当我编辑一个国家时，我如何使用ng模型在模式中写入时编辑我与选定国家的行，但是我只希望当我只写时，观察模式中的变化，当我点击更新按钮时，我希望我的表被更新

所以我现在拥有的是，我可以编辑一个国家，但当我在模式中更改它时，我可以在我写作的同时观察表中的更改，我希望只有当我单击“更新”时才会发生这种情况

这是我的密码：

    <div class="container">
    <h2>Country list</h2>
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addCountryModal">
  Add country
</button>
<button type="button" class="btn btn-primary" ng-click="refresh()">
  Refresh list
</button>
    <table class="table table-striped table-bordered table-hover" ng-init='refresh()'>
        <thead class="thead-dark">
            <tr>
                <th scope="col">Country Name</th>
                <th scope="col">Population</th>
                <th scope="col">Acciones</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="country in countries">
                <td>{{country.countryName}}</td>
                <td>{{country.population}}</td>
                <td>
                    <button class="btn btn-info btn-sm" type="button" data-toggle="modal" data-target="#addCountryModal" ng-click="selectedCountry(country)" ng-init="isEdit=true">Edit</button>
                    <button class="btn btn-danger btn-sm" type="button"  data-toggle="modal" data-target="#deleteCountryModal" ng-click="selectedCountry(country)">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- Modal Add/Edit-->
<div class="modal fade" id="addCountryModal" tabindex="-1" role="dialog" aria-labelledby="addCountryModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addCountryModalLabel">Add country</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="countryname">Country Name</label>
          <input type="text" class="form-control" id="countryname" ng-model="country.countryName" placeholder="Enter country name">
        </div>
        <div class="form-group">
          <label for="population">Population</label>
          <input type="text" class="form-control" id="pupulation" ng-model="country.population"  placeholder="Number of population">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="add()" data-dismiss="modal">Add</button>
      </div>
    </div>
  </div>
</div>

---

您可以在编辑模式中键入时看到更新，因为编辑模式设置为表格的对象；它们是同一个物体。解决方案将对象的副本传递给编辑模式

$scope.selectedCountry = function (country){
  $scope.country = angular.copy(country);
}

$scope.selectedCountry = function (country){
  $scope.country = angular.copy(country);
}