Блог

Я пытаюсь составить список друзей. Я настроил ее так, чтобы пользователь мог искать друзей и нажимать на их изображение, чтобы увидеть их профиль, это приведет их к профилю, где отображается информация, которая у меня есть в массиве в моем сервисе. У меня есть кнопка «добавить друга», которая при нажатии превращается в кнопку «удалить друга» и должна добавить этого друга в новое представление html. Есть несколько проблем, с которыми я сталкиваюсь, и, похоже, я не могу разобраться. 1) кнопка меняется для каждого пользователя, когда нажимается только на 1 профиль пользователя. 2) пользователь не добавляется в представление друзей.

Вот мой сервисный код:

 var friendProfile = {};
  var userFriends = [];

  this.addFriend = function(profileObj) {
      userFriends.push(profileObj);
  };

  this.removeFriend = function(profileObj) {
    for( var i = userFriends.length - 1; i >= 0; i--) {
      if (userFriends[i].name === profileObj.name) {
        userFriends.splice(i, 1);
      }
    }
  };  

Вот мой контроллер:

 $scope.friendProfile = {};
  $scope.userFriends = [];
  $scope.currentlyFriends = false;

  $scope.addFriend = function(profileObj) {
    mainSvrc.addFriend($scope.friendProfile );
    $scope.currentlyFriends = true;
  };

  $scope.removeFriend = function(profileObj) {
    mainSvrc.removeFriend
    ($scope.friendProfile);
    $scope.currentlyFriends = false;
  };  

Вот HTML:

 /*profile view with buttons*/

<button class="friend-profbutton"
        ng-click="addFriend(friendProfile)"
        ng-hide="currentlyFriends">ADD FRIEND</button>

        <button class="friend-profbutton"
        ng-click="removeFriend(friendProfile)"
        ng-show="currentlyFriends">REMOVE FRIEND</button>
    </div>


/*friends list it should be coming too*/
        <div ng-repeat="friend in userFriends" ui-sref="friend-profile({id:friend.id})" class="picture-wrapper">
            <img ng-src="{{friends.profileUrl}}" class="friend-profilePic">
            <div class="box">
              <div class="overlay">
                <p class="overlay-text">{{friends.name}}</p>
                <a class="view-proflink">View Profile</a>
              </div>
            </div>
        </div>  

 .state('friend-search', {
            url: '/friend-search',
            templateUrl: '/views/templates/friend-search.html',
            controller: 'friendSearchCtrl'
        })

        .state('friend-profile', {
          url: '/friend-profile/:id',
          templateUrl: 'views/templates/friend-profile.html',
          controller: 'friendProfileCtrl'
        })

        .state('friends', {
            url: '/friends',
            templateUrl: '/views/templates/friends.html',

        });  

Может кто-нибудь увидеть, что я могу делать неправильно?

В своем служении вы ничего не получаете взамен.

Можете ли вы попробовать на своем сервисе:

   this.userFriends = [];

  this.addFriend = function(profileObj) {
      this.userFriends.push(profileObj);
  };

  this.removeFriend = function(profileObj) {
    for( var i = this.userFriends.length - 1; i >= 0; i--) {
      if (this.userFriends[i].name === profileObj.name) {
        this.userFriends.splice(i, 1);
      }
    }
  };
  

и в вашем контроллере:

   $scope.friendProfile = {};
  $scope.userFriends = mainSvrc.userFriends ;
  $scope.currentlyFriends = false;

  $scope.addFriend = function(profileObj) {
    mainSvrc.addFriend($scope.friendProfile );
    $scope.userFriends = mainSvrc.userFriends ;
    $scope.currentlyFriends = true;
  };

  $scope.removeFriend = function(profileObj) {
    mainSvrc.removeFriend($scope.friendProfile);
    $scope.currentlyFriends = false;
    $scope.userFriends = mainSvrc.userFriends ;
  };
  

и правильно:

 <div ng-repeat="friend in userFriends" class="picture-wrapper">
    <div ui-sref="friend-profile({id:friend.id})">
        <img ng-src="{{friend.profileUrl}}" class="friend-profilePic">
        <div class="box">
            <div class="overlay">
                <p class="overlay-text">{{friend.name}}</p>
                <a class="view-proflink">View Profile</a>
            </div>
        </div>
    </div>
</div>