javascript - 使用 AngularJS Ng-if 函数的 HTML DOM

Question

我想问一下如何使用 angularjs 制作 DOM，但无需重新加载任何页面，所以这里是代码

<div class="container-customscroll">
    <div class="content mCustomScrollbar">
        <div class="itemcheck" ng-repeat="item in dataItem | regex:'name':alfabet | orderBy: 'name' | filter: searchItem">
             <div class="left" ng-if="item.preparation == ''"><i class="fa fa-circle silver"></i>{{item.name}}</div>
             <div class="left" ng-if="item.preparation == '1'"><i class="fa fa-circle green"></i>{{item.name}}</div>
              <div class="left" ng-if="item.preparation == '2'"><i class="fa fa-circle yellow"></i>{{item.name}}</div>
             <div class="left" ng-if="item.preparation == '3'"><i class="fa fa-circle pink"></i>{{item.name}}</div>
                      <div class="right" ng-click="tambahItem(item)" ng-if="item.button == 'add'"><a>+ Tambahkan</a></div>
                        <div class="hapus" ng-click="delete(item.master_code)" ng-if="item.button == 'remove'"><a>Hapus</a></div>
                                            </div>

这是 Angular 代码:

用于发布数据:

$scope.tambahItem = function(clickedData){
      var url = '/url';
        $http({
        method: 'POST',
        url: url,
        data: {
            "code": clickedData.master_code,
            "nama": clickedData.name,
            "preparation": clickedData.preparation
        }
      }).success(function(data){
        alert(clickedData.name + " telah ditambahkan");
        $scope.tambahkanKeCart();
      })
    };

这是删除函数:

$scope.delete = function (id) {
       if(confirm('Anda yakin ingin menghapus order ini?')){
           var url = '/url'
              $http({
                  method: "DELETE",
                  url: url + "/" + id
              }).success(function(data){
                  alert("data telah dihapus");
                  $window.location.reload();
              }).error(function(data){
                  alert("Tidak bisa dihapus");
                  $window.location.reload();
              });
           }else{
               return false;
           }
    };

在我上面的代码中有2个ng-if，在最后一行，都是if情况如果显示某个值。我的问题是如何让 ng-if 在不重新加载的情况下工作，你可以在 dev.pesanlab.com/order/pemeriksaan 中看到我当前的问题

如您所见，问题是，当您单击“tambahkan”按钮时，它不会更改为“hapus”按钮，而是必须在 hapus 按钮出现之前先重新加载。

希望大家理解我的问题，非常感谢大家的回答。

Answer 1

试试这个 -

$scope.tambahItem = function(clickedData){
      var url = '/url';
        $http({
        method: 'POST',
        url: url,
        data: {
            "code": clickedData.master_code,
            "nama": clickedData.name,
            "preparation": clickedData.preparation
        }
      }).success(function(data){
        alert(clickedData.name + " telah ditambahkan");
        $scope.tambahkanKeCart();
       $scope.dapatkanItem();
      })
    };

成功后，我调用了“$scope.dapatkan Item()”，它将获取“dataItems”的更新列表，并且 Angular 将再次自动绑定(bind)“dataItem”。