HTML DOM Using AngularJS Ng-if Function

Question

I would like to ask about how to make DOM using angularjs but without any page reloading, so here is the code

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

and here is the angular code:

for post the data:

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

here is the delete function:

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

In my code above there are 2 ng-if, in the last line, both are if situation if a certain value is shown. My question is how to make ng-if working without reloading, you can see my current problem in dev.pesanlab.com/order/pemeriksaan

As you can see, the problem is, when you click "tambahkan" button, it doesn't change to "hapus" button, instead it must be reloaded first before the hapus button appear.

I hope everyone understand with my question, and thank you so much for your answers.

Have you attempted this yourself first? I'd recommend you first have a go and then if you have issues create a question here. The docs for ng-If are at: docs.angularjs.org/api/ng/directive/ngIf — Wayne Ellery
– Wayne Ellery, Commented Mar 8, 2016 at 5:42
I would never ask if I wouldn't attempt to do it first... Why I use ng-if? Well as I said it is conditional... I know I can use Ng-show and Ng-hide but it doesn't work either... — Yuko Pangestu
– Yuko Pangestu, Commented Mar 8, 2016 at 5:48
But the code above is calling $window.location.reload(); Can you please attempt to change it to instead modify dataItem on $scope. — Wayne Ellery
– Wayne Ellery, Commented Mar 8, 2016 at 5:57
when you are calling $scope.tambahItem, after successful completion, call that function which is filling that list again. angular will automatically bind that data again and your button will show automatically. — Shailendra Singh Deol
– Shailendra Singh Deol, Commented Mar 8, 2016 at 6:29
@wayneEllery yeah, sorry it is a mistake of mine, actually the recent code must be $scope.tambahkanKeCart(); — Yuko Pangestu
– Yuko Pangestu, Commented Mar 8, 2016 at 7:42

Shailendra Singh Deol · Accepted Answer · 2016-03-08 09:30:38Z

0

Try This-

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

On Succes, i have called '$scope.dapatkanItem()' which will get updated list of 'dataItems' and angular will automatically bind 'dataItem' again.

answered Mar 8, 2016 at 9:30

Shailendra Singh Deol

6373 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML DOM Using AngularJS Ng-if Function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related