Hi Allbelow code for having the array of list like in controllerfunction 39use strict39 angular module39tapplent39 controller39TaskController39 taskController function taskControllerscope scoperesponse Name 39John Smith39 Gender 39M39 Location 39Wales39 desc39task1 desc39 startdate39task1 date39

HisanviCheck this example Now please take its reference and correct your codeHTMLltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs139angularminjs34gtltscriptgtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript type34textjavascript34gt var app angularmodule39MyApp39 appcontroller39MyController39 function scope scoperesponse Name 39John Smith39 Gender 39M39 Location 39Wales39 desc 39task1 desc39 startdate 39task1 date39 duedate 39task1 duedate39 Name 39Sally Smith39 Gender 39F39 Location 39USA39 desc 39task2 desc39 startdate 39task2 date

Display selected List items using jQuery in AngularJS

sanvi

SOLVED CLOSED ACTIVE ANSWERED
User: sanvi
Posted: on Jan 07, 2019 04:52 AM
Forum: AngularJS
Answer: 1
Views: 1945
Sample Code: Download

Hi All

below code for having the array of list like in controller

(function () {
    'use strict';
    angular
        .module('tapplent')
        .controller('TaskController', taskController);

    function taskController($scope){

        $scope.response = [
            {
                Name: 'John Smith',
                Gender: 'M',
                Location: 'Wales',
                desc:'task1 desc',
                startdate:'task1 date',
                duedate:'task1 duedate'
            },
            {
                Name: 'Sally Smith',
                Gender: 'F',
                Location: 'USA',
                desc:'task2 desc',
                startdate:'task2 date',
                duedate:'task2 duedate'
            },
            {
                Name: 'Curtis Timson',
                Gender: 'M',
                Location: 'England',
                desc:'task3 desc',
                startdate:'task3 date',
                duedate:'task3 duedate'
            }
        ];
    }
})

and for display it i have code like in html

<h2></h2>
<div ng-controller="TaskController">
    <ul>
        <li ng-repeat="user in response"><a href="#"   data-ng-click="ShowId($event)">{{user.Name}}</a> <br> {{user.Location}}   <h2>______</h2>
        </li>
    </ul>
</div>

my issue is that based on the click first item, seccond item or third item

eg Name: 'John Smith',

i want to display the corresponnding

desc:'task1 desc', startdate:'task1 date', duedate:'task1 duedate' at right of the web page.

left side i want list of items and right side coreponsding list of item details

thanks and regards siddu

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Jan 07, 2019 11:45 PM
Report

Hisanvi,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.response = [
        {
            Name: 'John Smith',
            Gender: 'M',
            Location: 'Wales',
            desc: 'task1 desc',
            startdate: 'task1 date',
            duedate: 'task1 duedate'
        },
        {
            Name: 'Sally Smith',
            Gender: 'F',
            Location: 'USA',
            desc: 'task2 desc',
            startdate: 'task2 date',
            duedate: 'task2 duedate'
        },
        {
            Name: 'Curtis Timson',
            Gender: 'M',
            Location: 'England',
            desc: 'task3 desc',
            startdate: 'task3 date',
            duedate: 'task3 duedate'
        }];

        $scope.ShowId = function (name) {
            var matchedData = $.grep($scope.response, function (element, index) {
                if (element.Name == name) {
                    return element;
                }
            });
            $scope.desc = matchedData[0].desc;
            $scope.startdate = matchedData[0].startdate;
            $scope.duedate = matchedData[0].duedate;
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <div style="width: 300px; height: 100px; float: left;">
        <ul>
            <li ng-repeat="user in response">
                <a href="#" data-ng-click="ShowId(user.Name)">{{user.Name}}</a>
                <br />{{user.Location}}<h2>______</h2>
            </li>
        </ul>
    </div>
    <div style="width: 300px; height: 100px; float: right;">
        Name : {{desc}}<br />
        Start Date : {{startdate}}<br />
        Due Date : {{duedate}}
    </div>
</div>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display selected List items using jQuery in AngularJS

Company

Explore

Follow us

Contact Us