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

Question

我是AngularJS的新手。

我做了一个基础项目，我有一个国家的CRUD。

代码运行良好，但我有一个问题，我想使用相同的模式添加或编辑国家/地区，问题是当我编辑国家/地区时我如何使用ng-model我的行与所选国家/地区进行编辑虽然我在模态中写，但我只想在我写时只观看模态中的更改，当我点击更新按钮时，我希望我的表更新。

所以我现在拥有的是，我可以编辑一个国家，但是当我在模态中更改它时，我可以同时观看表中的更改，我正在编写，我希望只有在我点击更新时才会发生。

这是我的代码：

    <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>

我的控制员：

'use strict';

app.controller('CountryController', ['$scope', 'CountryFactory', '$location', function ($scope, CountryFactory, $location) {

    $scope.country = {};
    $scope.countries = [];
    $scope.isEdit = false;

    $scope.refresh = function () {

        CountryFactory.getCountries().then(function (data) {
            $scope.countries = data.data;
        })
    }

    $scope.add = function () {
        if(!$scope.isEdit){
            CountryFactory.addCountry($scope.country).then(function (data) {
                $scope.countries.push(data.data);
                $scope.country = {};
            })
        }
        else{
            console.log("Countru");
            $scope.isEdit = false;
            CountryFactory.updateCountry($scope.country).then(function (data) {
                $scope.countries.push(data.data);
                $scope.country = {};
            })
        }

    }
    $scope.edit = function (country) {
        $scope.isEdit = true;
        $scope.country = country;
    }

    $scope.delete = function () {
        CountryFactory.deleteCountry($scope.country.id).then(function (data) {
            $scope.countries = $scope.countries.filter(function (item) { return item.id != $scope.country.id })
$scope.country = {};
        })


    }

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


}]);

Jsfiddle - Country crud