在AngularJS中从列表中拼接用户时查看不更新

时间:2017-06-09 03:17:06

标签: javascript angularjs

当我使用slice从列表中删除用户时,我的应用中出现此问题。但是,它不会从列表中删除。我正在通过API网址调用来获取用户。但由于某种原因,它不会从列表中删除用户。请看看我的代码。如果,你们想要完整的代码,我把它放在我的github中。我希望我们都能解决这个问题。先感谢您。

  

这是我的代码:

    <div ng-controller="MyCtrl">
  <div ng-repeat="person in userInfo.lawyers | filter : {id: lawyerId}">

    <a class="back" href="#/lawyer">Back</a>

    <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
      Edit
    </button>

      <button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>

    <a class="delete" ng-click="confirmClick(); confirmedAction(person);" confirm-click>Confirm</a>





    <div class="people-view">

      <h2 class="name">{{person.firstName}}</h2>

      <h2 class="name">{{person.lastName}}</h2>

      <span class="title">{{person.email}}</span>

      <span class="date">{{person.website}} </span>


    </div>

    <div class="list-view">

      <form>

        <fieldset ng-disabled="inactive">

          <legend>Basic Info</legend>

          <b>First Name:</b>

          <input type="text" ng-model="person.firstName">
          <br>

          <b>Last Name:</b>

          <input type="text" ng-model="person.lastName">
          <br>

          <b>Email:</b>

          <input type="email" ng-model="person.email">
          <br>


          <b>Website:</b>
          <input type="text" ng-model="person.website">
          <br>



        </fieldset>

      </form>

    </div>
  </div>
</div> 
  

App.js

 var app = angular.module("Portal", ['ngRoute',  'ui.bootstrap' ]);



  app.controller('MyCtrl', function($scope, $window) {


    $scope.inactive = true;





        $scope.confirmedAction = function (lawyer) {
        $scope.$apply(function () {
            var index = $scope.userInfo.lawyers.indexOf(lawyer);
            console.log($scope.userInfo.lawyers);
            $scope.userInfo.lawyers.splice(index, 1);
            console.log($scope.userInfo.lawyers);
            $window.location.href = '#/lawyer';
        });
    };


});




app.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal) {
    return {
        link: function (scope, element, attrs) {
            // ngClick won't wait for our modal confirmation window to resolve,
            // so we will grab the other values in the ngClick attribute, which
            // will continue after the modal resolves.
            // modify the confirmClick() action so we don't perform it again
            // looks for either confirmClick() or confirmClick('are you sure?')
            var ngClick = attrs.ngClick.replace('confirmClick()', 'true')
                .replace('confirmClick(', 'confirmClick(true,');

            // setup a confirmation action on the scope
            scope.confirmClick = function(msg) {
                // if the msg was set to true, then return it (this is a workaround to make our dialog work)
                if (msg===true) {
                    return true;
                }
                // msg can be passed directly to confirmClick('Are you sure you want to confirm?')
                // in ng-click
                // or through the confirm-click attribute on the
                // <a confirm-click="Are you sure you want to confirm?"></a>
                msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?';
                // open a dialog modal, and then continue ngClick actions if it's confirmed
                dialogModal(msg).result.then(function() {
                    scope.$eval(ngClick);
                });
                // return false to stop the current ng-click flow and wait for our modal answer
                return false;
            };
        }
    }
}])

/*
 Modal confirmation dialog window with the UI Bootstrap Modal service.
 This is a basic modal that can display a message with yes or no buttons.
 It returns a promise that is resolved or rejected based on yes/no clicks.
 The following settings can be passed:

 message         the message to pass to the modal body
 title           (optional) title for modal window
 okButton        text for YES button. set false to not include button
 cancelButton    text for NO button. ste false to not include button

 */
.service('dialogModal', ['$modal', function($modal) {
    return function (message, title, okButton, cancelButton) {
        // setup default values for buttons
        // if a button value is set to false, then that button won't be included
        cancelButton = cancelButton===false ? false : (cancelButton || 'No');
        okButton = okButton ===false ? false : (okButton || 'Yes');

        // setup the Controller to watch the click
        var ModalInstanceCtrl = function ($scope, $modalInstance, settings) {
            // add settings to scope
            angular.extend($scope, settings);
            // yes button clicked
            $scope.ok = function () {
               // alert("Lawyer is confirmed");
                $modalInstance.close(true);
            };
            // no button clicked
            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        };

        // open modal and return the instance (which will resolve the promise on ok/cancel clicks)
        var modalInstance = $modal.open({
            template: '<div class="dialog-modal"> \
              <div class="modal-header" ng-show="modalTitle"> \
                  <h3 class="modal-title">{{modalTitle}}</h3> \
              </div> \
              <div class="modal-body">{{modalBody}}</div> \
              <div class="modal-footer"> \
                  <button class="btn btn-primary" ng-click="ok()" ng-show="okButton">{{okButton}}</button> \
                  <button class="btn btn-warning" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button> \
              </div> \
          </div>',
            controller: ModalInstanceCtrl,
            resolve: {
                settings: function() {
                    return {
                        modalTitle: title,
                        modalBody: message,
                        okButton: okButton,
                        cancelButton: cancelButton
                    };
                }
            }
        });
        // return the modal instance
        return modalInstance;
    }
}])


  app.config(function ($routeProvider) {
$routeProvider
.when("/lawyer", {
    controller: "HomeController",
    templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
    controller: "LawyerController",
    templateUrl: "partials/about.html"
})
.otherwise({
    redirectTo: '/lawyer'

  });

});

2 个答案:

答案 0 :(得分:1)

但是元素会从列表中删除吗?

如果是,那么试试这个:

$scope.confirmedAction = function (lawyer) {
    $scope.$apply(function () {
      var index = $scope.userInfo.lawyers.indexOf(lawyer);
      console.log($scope.userInfo.lawyers);
      $scope.userInfo.lawyers.splice(index, 1);
      console.log($scope.userInfo.lawyers);
      $window.location.href = '#/lawyer';
    });
});

或者

$scope.confirmedAction = function (lawyer) {
    $timeout(function () {
      var index = $scope.userInfo.lawyers.indexOf(lawyer);
      console.log($scope.userInfo.lawyers);
      $scope.userInfo.lawyers.splice(index, 1);
      console.log($scope.userInfo.lawyers);
 $state.go($state.current, {}, {reload: true}); 
      // $window.location.href = '#/lawyer';
    },1100);
});

答案 1 :(得分:0)

问题是当你在像这样的对象数组上使用它时,你没有从IndexOf获得索引。阅读有关IndexOf here的更多信息。

相反,使用map然后在

上使用IndexOf

试试这样:

$scope.confirmedAction = function (lawyer) {
    var index = $scope.userInfo.lawyers.map(function(e) { return e.id; }).indexOf(lawyer.id);
    $scope.userInfo.lawyers.splice(index, 1);
    console.log($scope.userInfo.lawyers);
    $window.location.href = '#/lawyer';
};

此外,控制器更改默认情况下会被角度的摘要循环检测到,因此无需使用$scope.$apply。 此外,使用基本的get数组列表和删除功能简化了您的plunker。用它来构建你的方式

https://plnkr.co/edit/w6NuVLcqzc5Rjs7L6Cox?p=preview