无法在模态框中显示角度变量值

时间:2016-01-13 09:43:14

标签: angularjs angularjs-scope

下面的

{{$scope.custdata[0].email_id}}无效。我在其位置尝试了{{$scope.email_id}}{{email_id}}等,但没有一个正在运行。我还尝试查看调试器,没有显示错误。下面的div在页面加载时填充了列表,然后当我单击时,getCustomerData方法被成功调用,我可以看到在控制器中获取正确的值。不确定它是否有一些时间问题,如果是,如何处理它。需要帮忙。谢谢。

这是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>

以下是模态窗口代码 -

<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>

这是控制器 -

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);
        });
    }

})

3 个答案:

答案 0 :(得分:1)

您为ng-controller分配了错误的控制器名称。 将ng-controller的值替换为您定义的控制器的名称:ng-controller =“ CustomerStatCtrl as CustomerCtrl

使用带有 as 关键字的别名的最佳做法。 Div $范围内的变量可以像这样:

  

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

答案 1 :(得分:0)

你不需要在html中使用$ scope或scope使用它 {{custdata[0].email_id}}

答案 2 :(得分:0)

你的模态div应该在<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>