Enhancing ng-model by clicking on a list item

I currently have a textbox on my webpage.

<input ng-model="meetingData.client.ClientName" id='txtClient'
                     placeholder="Add new client"  type="text">

along with a list of items that I want to interact with.

Is there a way to automatically update the text box with the value from the list item whenever I click on it?

 <div class="item" ng-click="meetingData.client.ClientName = {{client.ClientName}}"
         ng-repeat="client in clients">
            <div class="lstClients">
                {{client.ClientName}}
            </div>
        </div>

I've tried implementing the above code snippet but it's not producing the desired outcome. Thank you

Answer №1

Experiment with different approaches

<div class="item" ng-click="meetingData.client.ClientName = client.ClientName"
     ng-repeat="client in clients">
        <div class="lstClients">
            {{client.ClientName}}
        </div>
    </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

Angular tabs: fetching tab content with $http upon clicking

My project involves managing big forms with a lot of data, and I've been thinking about organizing the information into tabs with separate sections for each tab. I'm looking for a solution where the content of the tabs is only loaded when clicke ...

Obtaining an element through its id using an expression in an Angular directive

Here's a complex question that needs to be broken down. I'm trying to mimic the behavior of the native <label> for <input>. Since nesting is not an option, I use a style like this: <input type="checkbox" id="test" /> Some other ...

Exploring the internet with the advanced capabilities of Angular JS

Encountering an issue with Internet Explorer and angular js. The html code displays correctly in Chrome and Firefox, but content within the ng-view tags does not appear in IE. <html xmlns:ng="http://angularjs.org"> <html lang="en" ng-app="poc"&g ...

Having trouble with the Angular Material datepicker component?

I have recently started learning angularjs and decided to utilize the angularjs material datepicker component to manage dates in my project. However, I seem to be encountering some issues as the control is not displaying properly on my DatePicker.html page ...

Are you using yeoman with csslint in your project?

As a newcomer to grunt, I am facing challenges in integrating csslint to monitor my project while running "grunt serve" for csslinting. I am specifically struggling with disabling the adjoining classes warning since it is not relevant for IE6 compatibili ...

Timeout function is failing to trigger the digest cycle

When calling a chrome function that runs asynchronously, the digest cycle needs to be run in order to update scope variable values in the view. While attempting to achieve this with $timeout and $evalAsync, I encountered issues. Directly calling $scope.$ap ...

What is AngularJS global data binding?

My template has a dynamic title that is inserted using the following code: <title>{{title}}</title> For each of my pages/routes, I use a different controller where I define the title like this: BackyApp.controller('HomeController', ...

Utilizing HighCharts' Reflow Feature for Dynamic Chart Resizing

Our Angular application utilizes highcarts-ng for implementing HighCharts. Check out the Chart Maximize and Minimize function that is currently operational: function expandChartPanel() { vm.chartMaxed = !vm.chartMaxed; viewHeader = ScopeFactory. ...

Utilizing Angular.js to retrieve data from the server and automatically update at specified intervals

I attempted to create a basic app that displays the newest message from each member. Initially, it loads an array of members. Then I invoke a function called refreshMsg to iterate through the array. Within the iteration, I set a timer on it. Unfortunate ...

$filter is functioning correctly, however it is generating an error message stating: "Error: 10 $digest() iterations reached. Aborting!"

Here is an example of a JSON object that I am working with: { "conversations":[ { "_id": "55f1595d72b67ea90d008", "topic_id": 30, "topic": "First Conversation", "admin": "<a href="/cdn-cgi/l/e ...

What is the best method for resetting filtered data in ng-table?

Implementing the ngTable directive has brought impressive filtering capabilities to my table. The structure of my view includes: <table ng-table="tableParams" show-filter="true" class="table table-bordered table-hover table-condensed table-striped"&g ...

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

I'm currently facing a challenge with creating a dynamic HTML template. In order to present data in a table, I need to distinguish between a regular String and an Array. Firstly, the HTML template is embedded within another template using the data-ng- ...

I am unable to access Angular $scope in the HTML Template, although I can view it in the console log

I have been following some online tutorials and using the angularjs-template to start learning Angular. However, I am facing an issue where the page (html template) is not updating with the controller. It seems like there is a problem in how I've set ...

Updating AngularJS: Removing the hashtag using history.pushState()

Struggling to enhance the aesthetics of the URLs in my AngularJS application, I am facing some challenges. While I can access the "/" route without any issues, the "/about" route seems to be out of reach. Please note that the project is situated at (loc ...

Personalized directive for HTTP validation, display dialog box upon detection of incomplete match

Looking to validate input against a server-side REST API and provide options for selection if invalid while typing. Already implemented in jQuery, now looking to implement in AngularJS. Would it be better as a custom directive or functions in the controll ...

Activeadmin prefers angular js routes over rails routes

My current application utilizes Rails 3.2.17 and AngularJS. I am interested in integrating Activeadmin into the existing setup. To achieve this integration, I followed the guidelines outlined in a blog post on Activeadmin by Ryan Bates. Here are the steps ...

The functionality of md-checkbox is not compatible with ng-click

I need to store the position every time a checkbox is changed: <h1 class="md-display-2">Simple TODO ng app</h1> <h2 class="md-display-3"></h2> <div ng-include src="'todo/add.html'"></div> <div> &l ...

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

A Guide to Displaying HTTP Error Messages on the Angular Login Page

When encountering a form validation failure on my login page, I utilize ngMessage to display an error message. However, I now want this div to be displayed in the event of an HTTP 500 error. While I can retrieve the corresponding error message when an HTTP ...

Choose the currently active tab within the uib-tabset component in AngularJS using ui-bootstrap

Trying to set the active tab using uib-tabset in the ui-bootstrap library has been a challenge. It seems that setting active="1" or active="0" does not have any effect on the active tab. You can find more information in the documentation here. For example ...