Question

我正在显示一个用户列表，其中包含使用 ng-repeat 代码为开始和结束呈现的2个按钮：

<div class="list-group" ng-repeat="patient in patients" >
                    <a href="#" class="list-group-item"  ng-click="chatNow(patient.id);" >{{patient.firstname}} {{patient.lastname}}</a> &nbsp;
    <button class="btn btn-success" ng-click="chatNow(patient.id);">{{btnLabel}}</button> &nbsp;
    <button class="btn btn-danger" ng-click="endVideo(patient.appointmentId);">End Consultation</button>
                </div> <!-- list-group ends -->

此列表使用$http.get每 30秒刷新一次。

btnLabel在Controller中使用：

设置

var t = $scope;
t.btnLabel = 'Start Consultation';

现在，在chatNow

上调用ng-click时会发生这种情况

    t.chatNow = function(jobId) {
  t.btnLabel = 'In Progress'; 
 };

但是，如果另一个属性chatStatus发生变化，我希望更改标签，如

{{patient.chatStatus == 22 ? 'Start Consultation':'In Progress'}}

问题在于我无法将这两者结合在一起，例如

标签会随着更改而更改 chatStatus

。非常感谢任何帮助。

由于还有更多指示。

Answer 1

选中此http://plnkr.co/edit/U4lVEhPZb5GPEc1wefdd?p=preview

根据您的需要进行必要的验证

  $scope.clickdata = function($event){
   $event.target.innerHTML = "In Progress"
 }

希望这会有所帮助..

Answer 2

试试这个：

$scope.$watch('chatStatus', function(newValue, oldValue) {
    if(newValue != oldValue && newValue == 22) {
        $scope.btnLabel = 'Start Consultation';
    }
});

现在有一个更新，我有机会仔细审查。

HTML：

<body ng-controller="MainCtrl">
  <div class="list-group" ng-repeat="patient in patients">
    <a href="#" class="list-group-item"  ng-click="chatNow(patient.id);" >{{patient.firstname}} {{patient.lastname}}</a> &nbsp;
    <button ng-init="btnLabel[$index]='Start Consultation'" class="btn btn-success" ng-click="chatNow(patient.id);">{{btnLabel[$index]}}</button> &nbsp;
    <button class="btn btn-danger" ng-click="endVideo(patient.appointmentId);">End Consultation</button>
  </div> <!-- list-group ends -->
  <button ng-click="thirtySecondRefresh(1)">30 Second Refresh</button>
</body>

AngularJS / JavaScript的：

app.controller('MainCtrl', function($scope) {
  $scope.btnLabel = [];
  $scope.patients = [
    {id: 21, firstname: 'Tim', lastname: 'Harker', chatStatus: 22},
    {id: 17, firstname: 'Satya', lastname: 'Unknown', chatStatus: 22},
    {id: 75, firstname: 'Stack', lastname: 'Overflow', chatStatus: 22}
  ];
  $scope.chatNow = function(id) {
    $scope.btnLabel[$scope.patients.indexOf($scope.patients.find(x => x.id == id))] = 'In Progress';
  };
  $scope.$watch('patients', function (newValues, oldValues) {
    for (var i = 0; i < newValues.length; i++) {
      if (newValues[i].chatStatus != 22) {
        $scope.btnLabel[i] = 'In Progress';
      }
    }
  }, true);
  $scope.thirtySecondRefresh = function(id) {
    $scope.patients[id].chatStatus = 20; // other than 22
  };
});

以下是Plunker的链接：http://plnkr.co/edit/Bd6UhU4RwDiYKGhEhR0n?p=preview

我希望它有所帮助！

根据条件更改按钮标签，然后单击angularjs ng-repeat

2 个答案: