To implement the replacement of text with a selected item in AngularJS, simply

I have a dropdown in my HTML:

<div class="dropdown">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown" ng-model="yearName">Filter by year
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li ng-repeat="year in ctrl.getYear() | orderBy: videoYear">
              <input type="checkbox" ng-model="ctrl.filter[year]" id='year{{$index}}' class='chk-btn styled-checkbox' />
              <label for='year{{$index}}'>{{year}}</label>

            </li>
          </ul>
        </div>

The current title is 'Filter by year', however, I want it so that when an item is changed, the title reflects the selected year. For example, if 1984 is selected, the title should change to 1984. How can I achieve this?

Thank you.

javascriptangularjs

Answer №1

Please review the following code snippet:

 angular.module("appExample", [])
   .controller('exampleCtrl', function($scope) {
     var ctrl = this;
     ctrl.filter = {};
     ctrl.getYear = function() {
       return [2001, 2002, 2003]
     }
   })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appExample" ng-controller="exampleCtrl as ctrl">
  <div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown" ng-model="yearName">Sort by year
      <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ng-repeat="year in ctrl.getYear() | orderBy: videoYear">
        <input type="checkbox" ng-model="ctrl.filter[year]" id='year{{year}}' ng-true-value="{{year}}" class='chk-btn styled-checkbox' />

        <label for='year{{year}}'>{{year}}</label>

      </li>
    </ul>
    {{ctrl.filter}}
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the viewing area dimensions on a web browser

Recently, while testing a web application page I developed with Selenium, I came across an interesting issue. After using the JavaScriptExecutor in Selenium to get the viewport size, I found that it was different for Chrome, IE, and Firefox. The sizes wer ...

javascripthtmlseleniumselenium-webdriver

Deliver search findings that are determined by matching criteria, rather than by identification numbers

I am seeking to return a JSON match upon form submission, rather than simply searching for a specific ID. However, I am uncertain about how to structure this. I have the ability to search for the necessary match in a JavaScript document within one of my n ...

javascriptjson

Converting a JSON array to C# and vice versa in Xamarin Forms

I've been struggling to send a C# object as JSON array to an API endpoint. I feel like I'm going crazy trying to solve these issues. Here's a sample of the JSON data: Array ( [user_id] => 0002323445635 [order] => {"order":{" ...

javascriptc#jsonvisual-studioxamarin

Is it possible to use ng-src to point to a file stored locally?

I am currently experimenting with using ng-src to load images from a local folder, but I keep encountering 404 errors. Can ng-src actually reference a local folder, or do you always have to use a hardcoded path like http://example.com/imgs/{{work.img}}.jpg ...

javascriptangularjs

Combining two items from separate arrays

How can I efficiently merge objects that share the same index in two different arrays of objects? Below is the first array const countries = [ { "name": "Sweden", "nativeName": "Sverige" }, ...

javascript

Is it more efficient to declare a variable or directly return the variable from the Element's getText() promise in Protractor?

I am facing a scenario where I need to retrieve the text of a web element using a promise and then extract a specific part of the string for further processing. Which example, the one at the top or the bottom, should I use? var id = element(by.binding( ...

javascriptangularjsseleniumpromiseprotractor

Color change is only visible after adjusting the position, size, or shape of the object

I am facing an issue with changing the color and font of text using fabric js. The problem is that the color change only takes effect after manipulating the object's dimensions. How can I make the color update immediately? Below is my HTML code: < ...

angularjsfabricjs

I encountered an error of "Unexpected token '>'" while working with an

My code includes an ajax call and utilizes promises in the function: element.on("keypress", ".keyEvents", function(event) { if (event.which == 13) { // create the url and json object var putUrl = ...

javascriptjqueryajax

Browse the string on the web browser

Is there a way for me to continuously read and capture a string as it is being written in the browser, retrieving its value every 5 seconds? I need to be able to monitor the changing value while it is being input. In PHP, I have the following code snippet ...

javascriptphpjquery

Is it recommended to differentiate between users and usersList in node.js?

Exploring the world of Node.js and Express, I find myself in the process of constructing a server after completing most of the frontend work with React for a complex application. Within the app structure, I decided to segregate mock data into users and use ...

javascriptnode.jsexpress

What is preventing the selected values of a dropdown element from being set?

Although it may seem simple to assign values to select elements, I'm puzzled as to why the code below is setting the values to null instead of the correct ones for "form-type" and "genre". All other fields are being set correctly. It's worth not ...

javascriptjqueryajax

TypeScript/Javascript - Error: The specified function is not callable

After recently delving into TypeScript, I found myself encountering an error in my code for a wheel mini-game on my app. The specific error being displayed in the console is: this.easeOut is not a function The relevant portion of the code causing the iss ...

javascriptangulartypescript

In Angular, the object may be null

click here for image Encountering an error message stating that Object is possibly 'null' when utilizing querySelector and addEventListener in Angular. ...

angularjstypescript

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Looking to streamline my headers in my Ionic 4 project by creating a separate reusable component for them. Here's how I set up my dashboard page with the header component: <ion-header> <app-header title="Dashboard"></app-he ...

javascriptangulartypescriptionic-framework

The server failed to respond to the Angular HTTP request

To store data in my database, I have created a function in my component.ts file that invokes a service: ajoutText(newtext: String) { this.dataService.sendtext(newtext); } On the HTML side, it looks like this: <form class="form"> <mat-form-f ...

javascriptnode.jsangularexpressangular-httpclient

Arrangement of components within an entity

I have an instance (let's refer to it as myObject) that is structured like this (when you log it to the console): >Object {info1: Object, info2: Object, info3: Object, info4: Object,…} >info1: Object >info2: Object Id: 53 ...

javascriptarrayssortingobject

Implementing the rendering functionality in Vuejs 3 to activate the parent component method from its child

Is there a way to call the clicked method on app2 from within ComponentA? Let's explore how this can be achieved in the provided example. const app = Vue.createApp({}); app.component('ComponentA', { template: `<button @click="cl ...

javascriptvue.jsvue-componentvuejs3

JavaScript code failed to run

I am currently attempting to invoke a JavaScript script to export a chart from the PrimeFaces chart component. The issue I am facing is that the base64str variable appears to be null, and the script responsible for populating this value is not being called ...

javascriptprimefaceslinechart

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

javascripthtmlprototypejs

Complete a form when a link or button on the webpage is clicked

I have a variety of links and buttons on my webpage, and they are generated dynamically. I am unable to assign an onclick event to each one individually. My goal is to submit form data to the next page whenever any link or button on the page is clicked. ...

javascriptjqueryhtml