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

Question

我有一个 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 就会打印相同的 id，甚至在第一次迭代中也是 chatData.sender_id 的值，这就是为什么这

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

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

这样做的目的是Henry Zou 的目的是不显示同一用户提交的两条或更多消息的个人资料图片(如果sender_id相同)则不显示个人资料图片。当新消息来自另一个发件人这意味着sender_id不同则显示个人资料图片

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

我还在两秒后收到消息，然后我在聊天框数据中添加新记录(如果它们不存在)

$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;
    };

Answer 1

这个新的代码片段将根据聊天框中的用户列表检查当前的用户 ID。对于当前用户以外的所有用户，显示内容。

方法#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 原型(prototype))。

下面的代码将为数组中的每个项目创建 $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>