CODEWITHSUNDEEP
angularjsangularjs-scope
lets.learn
lets.learn

Reputation: 169

Unable to display angular variable value in a modal box

{{$scope.custdata[0].email_id}} below is not working. I tried {{$scope.email_id}} and {{email_id}} etc in its place and none is working. I also tried to view debugger and no error is displayed. The below div is populated with list on page load and then when I click, getCustomerData method is called successfully and I can see the correct value being fetched in the controller. Not sure if its some timing issue and if it is, how to handle it. Need help. Thanks.

Here is the div -

<div class="images-div" ng-controller="getCustomer360Ctrl">
                   <ul ng-repeat="c in custdata">
                        <li><a ng-click="getCustomerData(c.member_id)"><img class="class="data-toggle="modal" data-target="#myModal" src="../images/user.ico" alt="img" /></a><p class="c-inf">{{c.member_id}}</p></li>
                   </ul>
                   <div></div>
               </div>

Following is modal window code -

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg modal-p">
      <div class="modal-content" style="margin-top: -122px;width: 479px;">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h5>Customer 360 view</h5>
        </div>
        <div class="modal-body">
          <div><img style="width: 150px; height:100px;" src="../images/user.ico" alt="img"/><p class=""> Unique id: 0019097<br>Gender: Female
</p></div>
            <div style="    float: right; width: 304px; height: 155px;margin-top: -152px;"><p>First Name:Jasmine<br> Last Name:  Thompson
</p>
                <p>Email Id:  {{$scope.custdata[0].email_id}}<br>Country: USA


                </p>
                <button type="button" style="margin-left: 162px;" class="btn btn-warning">Details in pdf </button>
            </div>

        </div>

Here is the controller -

customerStat.controller('CustomerStatCtrl', function($scope, $http){
    $scope.custdata=[];
    $scope.emailid;
    $scope.getCustomerData = function(member_id){
        //alert("Cust ID::"+"select * from hive.dataxylo.`Customer_Unified` where  where member_id ="+member_id);

        $http.post('http://url/.json', {
            queryType:  "SQL",
            query: "select ......"
        }).success(function(data, status, headers, config){

            $scope.custdata=data['rows'];
            $scope.emailid=$scope.custdata[0].email_id;

        }).error(function(err,data){
            alert("Error11::"+data);
        });
    }

})

Upvotes: 1

Views: 1512

Answers (3)

varun
varun

Reputation: 662

Your modal div should be inside <div class="images-div" ng-controller="CustomerStatCtrl">. 

    <div class="images-div" ng-controller="CustomerStatCtrl">
<ul ng-repeat="c in custdata">
    <li><a ng-click="getCustomerData(c.member_id)"><img class="class="data-toggle="modal" data-target="#myModal" src="../images/user.ico" alt="img" /></a><p class="c-inf">{{c.member_id}}</p></li>
</ul>
<div></div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg modal-p">
        <div class="modal-content" style="margin-top: -122px;width: 479px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5>Customer 360 view</h5>
            </div>
            <div class="modal-body">
                <div><img style="width: 150px; height:100px;" src="../images/user.ico" alt="img"/><p class=""> Unique id: 0019097<br>Gender: Female
                </p></div>
                <div style="    float: right; width: 304px; height: 155px;margin-top: -152px;"><p>First Name:Jasmine<br> Last Name:  Thompson
                </p>
                    <p>Email Id:  {{custdata[0].email_id}}<br>Country: USA


                    </p>
                    <button type="button" style="margin-left: 162px;" class="btn btn-warning">Details in pdf </button>
                </div>

            </div>
        </div>

Upvotes: 0

Martin Godzina
Martin Godzina

Reputation: 1575

You´r assigning the wrong controller name to ng-controller. Replace the value of ng-controller to the name of the controller you defined: ng-controller="CustomerStatCtrl as CustomerCtrl"

Its best practice to use an alias with the as keyword. Inside the Div $scope variables can be reached like this:

{{ CustomerCtrl.custdata[i] }} or {{ CustomerCtrl.emailid }}

Upvotes: 1

Paresh Gami
Paresh Gami

Reputation: 4782

You dont need to use $scope or scope in html use this {{custdata[0].email_id}}

Upvotes: 0

Related Questions