棱角分明的隐藏形式

angular - hiding form

本文关键字：隐藏      更新时间：2023-09-26

我有一个<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

            });

请在此处查看演示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>
相关文章：