javascript - 设置变量时，Angular Js ng-init在ng-repeat内部无法正常工作

我有一个ng-repeat，我在其中检查if条件，在每次循环重复结束时，我都将变量设置为ng-repeat的值

这是我想在ng-repeat中设置的变量

$scope.prvSid = "";

这是我的ng-repeat代码

<ul class="chats" ng-repeat="chatData in chatboxData">
    <li ng-class="{ 'out': chatData.sender_id == user_id , 'in': chatData.sender_id != user_id }">
         {{   prvSid }}
         {{   chatData.sender_id }}
        <span ng-if=" prvSid != chatData.sender_id ">
            <img class="avatar" alt="" src="{{ url('default/img/user_default_logo.jpg') }}" />
        </span>
        <div class="message">
            <span class="body"> {{ chatData.message }} </span>
        </div>
        <span ng-init="prvSid = chatData.sender_id"></span>
        {{   prvSid }}
    </li>
</ul>

我在这里面临的问题是，每当我在ng-repeat中打印这些值时，prvSid和chatData.sender_id都将为chatData.sender_id的值打印相同的ID，即使是第一次迭代，这就是为什么

<span ng-if=" prvSid != chatData.sender_id ">

条件不起作用并且我的图像没有显示，因为对于第一次迭代，条件应该为true，因为prvSid为""并且chatData.sender_id中包含一些ID

目的是
Henry Zou的目的是不显示同一用户提交的两条或多条消息的个人资料图片（如果sender_id相同），则不显示个人资料图片。当新消息来自另一个发件人时，这意味着sender_id不同，然后显示个人资料图片

首先，prvSid将为null，因此将显示图像，因为条件将在每次迭代结束时都不匹配。我将把prvSid设置为当前迭代sender_id，以便在下一次迭代中将此prv_id与sender_id匹配

我也在两秒钟后收到消息，然后我将新记录添加到chatboxdata中（如果它们中不存在）

$scope.getlasttwosecMsgs = function(user_id_chat,chat_id,user,chatboxData,is_new) {
      $http.get(url+'/getlasttwosecMsgs/'+chat_id).success(function(data){
        angular.forEach(data, function(value, key) {
          var exists = $scope.containsObject(value,chatboxData);
          if (!exists) {
            $scope.chatboxData.push(value);
            console.log($scope.chatboxData);
          };
        });
      });
    }
$scope.containsObject = function(obj, list) {
        var i;
        for (i = 0; i < list.length; i++) {
            if (angular.equals(list[i], obj)) {
                return true;
            }
        }

        return false;
    };

最佳答案

此新代码段将根据聊天框中的用户列表检查当前userID。对于不是当前用户的所有用户，请显示内容。

方法1（首选）

angular
  .module('app', [])
  .controller('myCtrl', function(){
  var vm = this;
  var prvSid = null;
  vm.chatboxData = [{id:1},{id:1},{id:2},{id:3}];

  vm.chatboxData.forEach(function(chatbox){
    if(prvSid !== chatbox.id){
      chatbox.showIcon = true;
    }
    prvSid = chatbox.id;
   });
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl as vm">
    <ul class="chats" ng-repeat="chatData in vm.chatboxData">
      <li>
        <span ng-if="chatData.showIcon ">
            ICON
        </span>
        {{::chatData.id}}

      </li>
    </ul>
  </div>
</div>

方法2

angular
  .module('app', [])
  .controller('myCtrl', function(){
  var vm = this;
  vm.prvSid = null;
  vm.chatboxData = [{id:1},{id:1},{id:2},{id:3}];

  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl as vm">
    <ul class="chats" ng-repeat="chatData in vm.chatboxData">
      <li>
        <span ng-if="chatData.showIcon ">
            ICON
        </span>
        {{::vm.prvSid}} {{::chatData.id}}
        <span ng-init="chatData.showIcon = (vm.prvSid !== chatData.id)"></span>
        <span ng-init=" vm.prvSid = chatData.id"></span>

      </li>
    </ul>
  </div>
</div>

方法3（不使用controllerAs语法）

angular
  .module('app', [])
  .controller('myCtrl', function($scope){
  var prvSid = null;
  $scope.chatboxData = [{id:1},{id:1},{id:2},{id:3}];

  $scope.chatboxData.forEach(function(chatbox){
    if(prvSid !== chatbox.id){
      chatbox.showIcon = true;
    }
    prvSid = chatbox.id;
   });
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl">
    <ul class="chats" ng-repeat="chatData in chatboxData">
      <li>
        <span ng-if="chatData.showIcon ">
            ICON
        </span>
        {{::chatData.id}}

      </li>
    </ul>
  </div>
</div>

老答案


  In the video AngularJS MTV Meetup: Best Practices (2012/12/11), Miško explains "..if you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong.."


ng-repeat为每个项目创建一个继承的作用域（例如javascript原型）。

下面的代码将为数组中的每个项目创建$ scope.prvSid，其值始终为chatData.sender_id。

<span ng-init="prvSid = chatData.sender_id"></span>

如果您的意思是它只有1个prvSid id实例，那么您需要做的是首先在父范围内初始化prvSid变量（或使用dot（。）规则）

<div ng-init="prvSid = null"> <!-- initializing prvSid id @ parent scope -->
<ul class="chats" ng-repeat="chatData in chatboxData">
    <li ng-class="{ 'out': chatData.sender_id == user_id , 'in': chatData.sender_id != user_id }">
         {{   prvSid }}
         {{   chatData.sender_id }}
        <span ng-if=" prvSid != chatData.sender_id ">
            <img class="avatar" alt="" src="{{ url('default/img/user_default_logo.jpg') }}" />
        </span>
        <div class="message">
            <span class="body"> {{ chatData.message }} </span>
        </div>
<!-- this will now update the parent scope's prvSid instead of creating a new one for each item in the array -->
        <span ng-init="prvSid = chatData.sender_id"></span>
        {{   prvSid }}
    </li>
</ul>
</div>

关于javascript - 设置变量时，Angular Js ng-init在ng-repeat内部无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34742521/