Getting the badge value of a button in Angular JS is a simple process that involves accessing

Question

Getting the badge value of a button in Angular JS is a simple process that involves accessing

How can I retrieve the badge value of a Button? This badge represents data-text-as-pseudo-element and I am new to Angular. Can someone guide me on how to achieve this?


    <style 
    type="text/css">[data-text-as-pseudo-element]::before { content: attr(data-text-as-pseudo-element); }
    </style>


        <button role="tab" title="Chats" tabindex="0" aria-label="Chats, 1
           unread notification." aria-selected="true" style="position: relative;
           display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0;
           overflow: hidden; align-items: center; justify-content: center;
           background-color: transparent; border-color: transparent; text-align:
           left; border-width: 0px; width: 80px; padding-top: 2px; height: 50px;
           cursor: pointer; border-style: solid;">
    <div role="none"
           style="position: relative; display: flex; flex-direction: column;
           flex-grow: 0; flex-shrink: 0; overflow: hidden; align-items: center;
           justify-content: center; width: 80px; height: 50px;">
    <div
           aria-hidden="true" data-text-as-pseudo-element="" style="position:
           relative; display: inline; flex-grow: 0; flex-shrink: 0; overflow:
           hidden; white-space: pre-wrap; overflow-wrap: break-word; height:
           20px; font-size: 20px; color: rgb(0, 120, 212); background-color:
           rgba(0, 0, 0, 0); font-family: SkypeAssets-Light; padding: 0px;
           cursor: inherit;"></div><div data-text-as-pseudo-element="Chats"
           style="position: relative; display: inline; flex-grow: 0;
           flex-shrink: 0; overflow: hidden; white-space: pre; text-overflow:
           ellipsis; font-size: 10px; color: rgb(0, 120, 212); font-family:
           &quot;SF Regular&quot;, &quot;Segoe System UI Regular&quot;,
           &quot;Segoe UI Regular&quot;, sans-serif; font-weight: 400;
           text-align: center; margin-top: 2px; align-self: stretch; cursor:
           inherit;"></div><div role="none" aria-hidden="true" style="position:
           absolute; display: flex; flex-direction: column; flex-grow: 0;
           flex-shrink: 0; overflow: visible; align-items: center; height: 24px;
           width: 30px; top: 0px; right: 12px; justify-content: center;">
    <div
           role="none" style="position: relative; display: flex; flex-direction:
           column; flex-grow: 0; flex-shrink: 0; overflow: hidden; align-items:
           center; justify-content: center; height: 20px; min-width: 20px;
           border-radius: 10px; background-color: rgb(244, 67, 54);
           padding-left: 4px; padding-right: 4px; width: 20px; border-color:
           rgb(240, 244, 248); border-width: 2px; border-style: solid;">
    <div
           data-text-as-pseudo-element="1" style="position: relative; display:
           inline; flex-grow: 0; flex-shrink: 0; overflow: hidden; white-space:
           pre; text-overflow: ellipsis; color: rgb(255, 255, 255); font-size:
           10px; line-height: 10px; text-align: center; background-color:
           rgba(0, 0, 0, 0); font-family: &quot;SF Bold&quot;, &quot;Segoe
           System UI Bold&quot;, &quot;Segoe UI Bold&quot;, sans-serif;
           font-weight: 400; cursor: inherit;">
    </div>
    </div>
    </div>
    </div>
    </button>

https://i.sstatic.net/5Fccj.png

Any recommendations or advice would be greatly appreciated!

Thank you in advance!!

html css angularjs

Answer 1

Answer №1

After putting together a demonstration, I encountered an issue with compatibility in IE11. In order to ensure functionality in IE11, the CSS needs to be adjusted accordingly.

The example is based on a solution found here: Link

The key takeaway from the linked example is how to display the number of notifications using the attribute 'data-count':

<button class="notification-button" data-count="5"></button>

In AngularJS, to make this dynamic, you need to bind this attribute to a scope variable using the ng-attr-* directive

<button class="notification-button" ng-attr-data-count="{{counter}}"></button>

AngularJS docs gn-attr-*

When to use ng-attr?

angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

myCtrl.inject = ['$scope'];

function myCtrl($scope) {
  $scope.counter = 0;

  $scope.increment = function() {
    $scope.counter++;
  }
}

.notification-button {
  background: linear-gradient(to bottom, rgba(37, 130, 188, 1) 0%, rgba(41, 137, 216, 1) 32%, rgba(41, 137, 216, 1) 42%, rgba(175, 224, 234, 1) 100%);
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: none;
  margin-top: 40px;
  margin-left: 40px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.notification-button:before {
  content: attr(data-count);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: block;
  border-radius: 50%;
  background: rgb(67, 151, 232);
  border: 1px solid #FFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #FFF;
  position: absolute;
  top: -7px;
  left: -7px;
}

.notification-button.badge-top-right:before {
  left: auto;
  right: -7px;
}

.notification-button.badge-bottom-right:before {
  left: auto;
  top: auto;
  right: -7px;
  bottom: -7px;
}

.notification-button.badge-bottom-left:before {
  top: auto;
  bottom: -7px;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">

<head>
  <meta charset="UTF-8>",<
  <title>Test</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>

<body>

  <button ng-click="increment();">Increment</button>

  <div>
    {{counter}}
  </div>

  <button class="notification-button" ng-attr-data-count="{{counter}}"></button>


</body>

</html>

Answer 2

After putting together a demonstration, I encountered an issue with compatibility in IE11. In order to ensure functionality in IE11, the CSS needs to be adjusted accordingly.

The example is based on a solution found here: Link

The key takeaway from the linked example is how to display the number of notifications using the attribute 'data-count':

<button class="notification-button" data-count="5"></button>

In AngularJS, to make this dynamic, you need to bind this attribute to a scope variable using the ng-attr-* directive

<button class="notification-button" ng-attr-data-count="{{counter}}"></button>

AngularJS docs gn-attr-*

When to use ng-attr?

angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

myCtrl.inject = ['$scope'];

function myCtrl($scope) {
  $scope.counter = 0;

  $scope.increment = function() {
    $scope.counter++;
  }
}

.notification-button {
  background: linear-gradient(to bottom, rgba(37, 130, 188, 1) 0%, rgba(41, 137, 216, 1) 32%, rgba(41, 137, 216, 1) 42%, rgba(175, 224, 234, 1) 100%);
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: none;
  margin-top: 40px;
  margin-left: 40px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.notification-button:before {
  content: attr(data-count);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: block;
  border-radius: 50%;
  background: rgb(67, 151, 232);
  border: 1px solid #FFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #FFF;
  position: absolute;
  top: -7px;
  left: -7px;
}

.notification-button.badge-top-right:before {
  left: auto;
  right: -7px;
}

.notification-button.badge-bottom-right:before {
  left: auto;
  top: auto;
  right: -7px;
  bottom: -7px;
}

.notification-button.badge-bottom-left:before {
  top: auto;
  bottom: -7px;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">

<head>
  <meta charset="UTF-8>",<
  <title>Test</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>

<body>

  <button ng-click="increment();">Increment</button>

  <div>
    {{counter}}
  </div>

  <button class="notification-button" ng-attr-data-count="{{counter}}"></button>


</body>

</html>

Getting the badge value of a button in Angular JS is a simple process that involves accessing

Answer №1

Similar questions

Blending HTML template and WordPress PHP file

What is the best way to arrange list items in this manner?

Updating pages dynamically using AJAX

What's the best way to add a timestamp and class name to Angular's $log for an enhanced logging experience?

How to dynamically update data in Angular without the need for a page refresh or loading?

jQuery UI Datepicker extending beyond its bounds

Could someone share an instance of an AngularJS configuration that continuously checks for new data and automatically refreshes the user interface once the data is obtained?

Using cookies locally is smooth, but unfortunately they don't seem to function as expected on VPS

Server becomes unresponsive when executing the "concurrent:server" task

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

Guide to adding a tag in front of a text in HTML with Python

What is the process for inheriting HTML templates?

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

Checking for an existing alert in JavaScript

Circular reference occurs when two or more objects refer to each other in a loop

What steps can be taken to avoid my Bootstrap banner wrapping to a new line?

What is the best way to position a title at the bottom center of each image within my grid gallery?

Placing an image in context with the background image

I aim to toggle the visibility of input fields upon clicking a button

Using addClass and removeClass functions in JQuery when selecting a radio button