Modify the text of a button depending on the condition and user interaction within an ng-repeat loop in AngularJS

Question

Modify the text of a button depending on the condition and user interaction within an ng-repeat loop in AngularJS

I have a scenario where I am displaying a list of users with two buttons for Start and End using the ng-repeat code:

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

This list is automatically refreshed every 30 seconds using $http.get.

The btnLabel is initially set to 'Start Consultation' in the Controller:

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

When chatNow is called on ng-click, the btnLabel changes to 'In Progress':

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

Now, I also want the label to change based on the chatStatus property:

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

The challenge I am facing is combining both of these conditions so that the label changes on click as well as when there is a change in chatStatus. Any assistance would be highly appreciated.

Thank you for any further pointers.

javascript angularjs

Answer 1

Answer №1

Take a look at this http://example.com/edit/AbC123XYZ456

Make sure to validate according to your specific requirements

  $scope.updateStatus = function($event){
   $event.target.innerHTML = "Updating"
 }

I hope this information is useful to you.

Answer 2

Take a look at this http://example.com/edit/AbC123XYZ456

Make sure to validate according to your specific requirements

  $scope.updateStatus = function($event){
   $event.target.innerHTML = "Updating"
 }

I hope this information is useful to you.

Answer 3

Answer №2

Give this a try:

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

After a thorough review, here's an updated version for you.

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

Feel free to check out the Plunker for a live demo: http://plnkr.co/edit/Bd6UhU4RwDiYKGhEhR0n?p=preview

I trust this will be of assistance!

Answer 4

Give this a try:

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

After a thorough review, here's an updated version for you.

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

Feel free to check out the Plunker for a live demo: http://plnkr.co/edit/Bd6UhU4RwDiYKGhEhR0n?p=preview

I trust this will be of assistance!

Modify the text of a button depending on the condition and user interaction within an ng-repeat loop in AngularJS

Answer №1

Answer №2

Similar questions

How do I retrieve the HSL value for a color selected using an input of type 'color' in JavaScript?

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

Aligning the canvas resolution to match the video resolution for superimposition purposes

In ReactJS, the way to submit a form using OnChange is by utilizing the

What are the benefits of using `observer` over `inject` when passing data to a React component in MobX?

The removal of classList.remove() only eliminates the class itself, not its contents

Show the value in the input text field if the variable is present, or else show the placeholder text

Avoiding the utilization of HTML forms

Transferring data from JavaScript to PHP for geolocation feature

Searching for two distinct nested key values in Ramda

Do AngularJS routes allow the use of special characters in URLs?

Using data-image as the source for Bootstrap Modal

Troubleshooting a bug in React TypeScript with conditional logic

What is the best way to retrieve a date (value) from a DatePicker and then set it as a property in an object

Using Typescript to establish a connection between ngModel and an object's property

Navigating a collection of objects in JavaScript: A step-by-step guide

Creating a personalized Autocomplete feature using React Material-UI with the help of the renderInput method

Adjust input width based on content in VueJS

In React, firebase.firestore() is operational, but firebase.functions() remains undefined

What could be causing one of my images to not appear on my Gatsby page?