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

Angular Js ng-init is not working properly inside ng-repeat while setting a variable

本文关键字：ng 常工作 工作 内部 repeat 变量 Angular Js init 设置      更新时间：2023-09-26

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

这是我想在ng重复中设置的变量

$scope.prvSid = "";

这是我的ng重复代码

<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，即使是在第一次迭代中也是如此，这就是为什么这个

<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匹配

我也会在两秒钟后收到消息，然后我会在聊天室数据中添加新记录，如果中不存在的话

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

这个新的代码片段将根据聊天框中的用户列表检查当前用户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>

旧答案

在视频AngularJS MTV Meetup:最佳实践（2012/12/11），Miško解释道："…如果你使用ng模型，某个地方一定有一个点。如果你没有点，你在做错误的"

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

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

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

如果您的意思是只有1个prvSid id实例，那么您需要做的是首先在父作用域初始化prvSid变量（或使用点（.）规则）

<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>
相关文章：