javascripthtmlangularjsangularjs-ng-repeatangularjs-scope

different image url each profile (ng-repeat)(ng-src)

result is here

I want a different image url each person profile everytime they’re profile details appeared. But what happen is it’s only targeted the last url on $scope.imgSrc so they have all same pics which is I don’t like :(

I've done this and it doesn't work :(

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Details AngularJS</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://static.staticsave.com/mycodestyle/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
</head>
<body>

    <div class="container" ng-app="DetailApp">
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 commentBox">
           <div ng-controller="PostController">
                   <h4>Show profile details</h4>       
                <ul>
                  <li ng-repeat='detail in details track by $index'>
                    <div class='detail'>
                      <img class="img-icon" ng-src="{{imageSrc}}" />
                      <div class="com">
                        <span><a href="javascript:void(0);">{{detail.name}}</a></span> {{detail.aboutYou}}
                      </div>
                    </div>
                  </li>
                </ul>              
           </div>
        </div> 
</div>


<script>

var app = angular.module('DetailApp', []);

app.controller('PostController', function($scope, $timeout) {
                
                                // tie the view to ngModule which saves the JSON to localStorage
                $scope.details = localStorage.getItem('details','imageSrc');
                $scope.details = (localStorage.getItem('details','imageSrc')!==null) ? JSON.parse($scope.details) : [];
                localStorage.setItem('details', JSON.stringify($scope.details));


                    var xtimeout = $timeout(function() {
                    $scope.details.unshift({
                        name: "Zandra",
                        aboutYou: "Hi! it's me Zandra and I love Singing <3"
                    });
                    localStorage.setItem("details", JSON.stringify($scope.details));
                }, 1000); 

                    var xtimeout2 = $timeout(function() {
                    $scope.details.unshift({
                        name: "Aaron",
                        aboutYou: "Hi! it's me Aaron from San Antonio Texas"
                    });
                    localStorage.setItem("details", JSON.stringify($scope.details));
                }, 2000); 

                    var xtimeout3 = $timeout(function() {
                    $scope.details.unshift({
                        name: "Jessica",
                        aboutYou: "Hi! it's me Jessica and I really like Pokemon :)"
                    });
                    localStorage.setItem("details", JSON.stringify($scope.details));
                }, 3000); 

                    var logName = $scope.details.some((xdetail)=> xdetail.name === "Zandra");
                    var logName2 = $scope.details.some((xdetail)=> xdetail.name === "Aaron");
                    var logName3 = $scope.details.some((xdetail)=> xdetail.name === "Jessica");

                
                if (logName === true) {
                    $scope.imageSrc='https://i.ibb.co/sbnRv3h/pix1.jpg';
                  $timeout.cancel(xtimeout);                     
                } else {
                    $scope.imageSrc='https://i.ibb.co/sbnRv3h/pix1.jpg';
                }

                if (logName2 === true) {
                    $scope.imageSrc='https://i.ibb.co/v1c2s8f/pix2.jpg';
                  $timeout.cancel(xtimeout2);
                } else {
                    $scope.imageSrc='https://i.ibb.co/v1c2s8f/pix2.jpg';
                }


                if (logName3 === true) {
                    $scope.imageSrc='https://i.ibb.co/xCjYF5Y/pix3.jpg';
                  $timeout.cancel(xtimeout3);
                } else {
                    $scope.imageSrc='https://i.ibb.co/xCjYF5Y/pix3.jpg';
                }
                
});

</script>

</body>
</html>

I don’t know what to do I’m new with angularJS and my script already mess. I need any clean version also if possible.

Solution

  • Since image URL is specific to person, you can have it as part of user information itself. Below is a version of sorted code to set separate image per person.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Details AngularJS</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://static.staticsave.com/mycodestyle/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
  </head>
  <body>
    <div class="container" ng-app="DetailApp">
      <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 commentBox">
        <div ng-controller="PostController">
          <h4>Show profile details</h4>
          <ul>
            <li ng-repeat='detail in details track by $index'>
              <div class='detail'>
                <img class="img-icon" ng-src="{{detail.imageSrc}}" />
                <div class="com">
                  <span>
                    <a href="javascript:void(0);">{{detail.name}}</a>
                  </span> {{detail.aboutYou}}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      function setUser($scope, name, aboutYou, imageSrc) {
        var user = $scope.details.filter(function(user) {
          return user.name === name;
        })[0];
        if (!user) {
          user = {};
          $scope.details.unshift(user);
        }
        user.name = name;
        user.aboutYou = aboutYou;
        user.imageSrc = imageSrc;
      }
      var app = angular.module('DetailApp', []);
      app.controller('PostController', function($scope, $timeout) {
        // tie the view to ngModule which saves the JSON to localStorage
        $scope.details = JSON.parse(localStorage.getItem('details') || '[]');
        setUser($scope, "Zandra", "Hi! it's me Zandra and I love Singing <3", "https://i.ibb.co/sbnRv3h/pix1.jpg");
        setUser($scope, "Aaron", "Hi! it's me Aaron from San Antonio Texas", "https://i.ibb.co/v1c2s8f/pix2.jpg");
        setUser($scope, "Jessica", "Hi! it's me Jessica and I really like Pokemon :)", "https://i.ibb.co/xCjYF5Y/pix3.jpg");
        localStorage.setItem("details", JSON.stringify($scope.details));
      });
    </script>
  </body>
</html>