Угловой - скрывающий вид

У меня есть <h4> у него есть пункт Заголовок, если вы щелкнете по заголовку, он превратится в текстовое поле с кнопками отправки и отмены У меня все это работает, моя проблема заключается в попытке скрыть форму после регата ajax

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


            });
Источник

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>
Источник

Все, что вам нужно, это простая функция, которая устанавливает $scope.editThis в false, Или переключается, в зависимости от того, что вам нужно. Вы, чем вызывать эту функцию на ng-click, Причина такого поведения довольно сложна и связана с тем, как построен javascript. Важно помнить: если вы хотите, чтобы угловые реагировали на $scope изменить, обернуть это изменение в функции и вызвать его или вызвать $apply() на вашей сфере.

Давайте вызовем функцию hide HideForm и поместим ее в ваш контроллер:

$scope.editThis = true;
$scope.hideForm = function () {
    $scope.editThis = false;
}

Теперь просто положить ng-click="hideForm()" на элемент, который вы нажимаете, чтобы скрыть форму. Или позвоните по телефону $scope.hideForm(); внутри отправляющей функции, в конечном итоге перезапускает форму, если отправка возвращает ошибку.

Альтернатива - позвонить $scope.$apply() после того, как вы измените editThis, который, в свою очередь, позвонит $scope.$digest() и фактически извлекают блестящие внутренние строки AngularJS с двусторонним связыванием данных.

Источник
Другие вопросы по тегам