Question

我有<h4>有一个项目标题，如果你点击标题然后它变成一个带有提交和取消按钮的文本框。我已经完成了所有工作，我的问题是尝试在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>

请参阅我使用$scope.editThis确定天气以显示或

我不知道为什么这不起作用。

 $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


            });

Answer 1

请在此处查看演示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>

角度隐藏形式

1 个答案: