angular - hiding form

Question

I have a <h4> that has an item Title, if you click on the title then it turns into a textbox with submit and cancel buttons. I have all that working , my problem is Trying to hide the form after the ajax reguest

html:

<div class="col-xs-12" ng-show="editThis">
   <div class="col-xs-8">
      <input type="text" class="form-control" ng-model="topic.TopicName" />
   </div>
   <div class="col-xs-2 pull-right">
      <input type="button" class="btn-xs btn-success btn" ng-click="editDetails(topic)" value="submit" />
   </div>
   <div class="col-xs-2 pull-right">
      <input type="button" class="btn btn-xs btn-danger" value="cancel" ng-click="editThis = false" />
   </div>

see I use $scope.editThis to determine weather to show the or the

i do not know why this is not working.

 $http.post("/MyVault/EditTopic", { topicEditId: item.VaultTopicId, topicEditName: item.TopicName, topicEditDescription: item.TopicDescription })
                .then(function(data, status, headers, confis) {
                    $scope.editThis = false;  // never gets reflected in view


            });

Does the POST call definitely succeed? Check in the Network tab of the devtools to make sure. The reason I ask is that you have only assigned a success handler for the call, so if it errors out, then nothing will happen. — GregL
– GregL, Commented Mar 26, 2015 at 22:50
If I put the debugger on that line , it executes it just fine , the view never reflects the changes though — Scott Selby
– Scott Selby, Commented Mar 26, 2015 at 22:54
Can you reproduce this using something jsFiddle, Plunkr, jsBin, CodePen or the inbuilt snippet support on SO? I suspect something else is introducing a new scope somewhere so you end up with two different editThis properties. — GregL
– GregL, Commented Mar 26, 2015 at 23:05

sylwester · Accepted Answer · 2015-03-26 23:39:11Z

1

Please see demo here http://jsbin.com/saduju/4/edit

JS:

var app = angular.module('app', []);

    app.controller('firstCtrl', function ($scope, $http) {

        $scope.topics = [
            {TopicName: "First Topic" }, 
            {TopicName: "Second Topic"},
            {TopicName: "Third Topic"}
            ];


        $scope.editDetails = function (topic) {

            $http.post("/MyVault/EditTopic", {
                topicEditName: topic.TopicName
            })
            //success calback
            .then(function (data, status, headers, confis) {
            })
            //error calback
            .then(function (error) {
            })
            //finally calback
            .then(function () {
            //--change editThis to topic.editThis

                topic.editThis = false;

            });


        };
    });

html:

 <body ng-app="app">
      <div ng-controller="firstCtrl">
        <div ng-repeat="topic in topics" >
           <!--change topic to topic.editThis-->
      <h4 ng-click="topic.editThis=true">{{topic.TopicName}}</h4>
          <!--change topic to topic.editThis-->
        <div class="col-xs-12" ng-show="topic.editThis">
       <div class="col-xs-8">
          <input type="text" class="form-control" ng-model="topic.TopicName" />
       </div>
       <div class="col-xs-2 pull-right">
          <input type="button" class="btn-xs btn-success btn" ng-click="editDetails(topic)" value="submit" />
       </div>
       <div class="col-xs-2 pull-right">
          <input type="button" class="btn btn-xs btn-danger" value="cancel" ng-click="editThis = false" />
       </div>
      </div>
          </div>
    </body>

edited Mar 26, 2015 at 23:39

answered Mar 26, 2015 at 22:54

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

12 Comments

Scott Selby Over a year ago

any idea why the last promise would work and not the suddess?

GregL Over a year ago

I don't believe that is the correct way to add success and error handlers using .then() on the $http service. It should take up to 2 arguments, one for the success handler and one for the error handler.

sylwester Over a year ago

@ScottSelby more likely some error occurs, if you put that in finally callback doesn't matter what happens editor should disappear

sylwester Over a year ago

@ScottSelby what version of angular are you using ? Have you checked that bin ?

GregL Over a year ago

The reason this works in the jsBin is that jsBin does not return an error for the POST request, and the .then() function only adds success handlers with the way it has been used here.

|

Collectives™ on Stack Overflow

angular - hiding form

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related