Question

这里我传递6个输入并获得6个输出字段当我第一次点击按钮时$ scope.data没有绑定或更新UI中的数据如果我第二次点击按钮$ scope.data绑定或更新UI中的数据。请帮我解决这个问题。

    <h3>Input:</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">SalesService</label>
            <div class="col-sm-10">
                <input type="text" placeholder="SalesService" ng-model="SalesService" id="SalesService">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">PlatForm</label>
            <div class="col-sm-10">
                <input type="text" placeholder="PlatForm" ng-model="PlatForm" id="PlatForm">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">SegMent:</label>
            <div class="col-sm-10">
                <input type="text" placeholder="SegMent" ng-model="SegMent" id="SegMent">

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Path:</label>
            <div class="col-sm-10">
                <input type="text" placeholder="Path" ng-model="Path">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">UserId:</label>
            <div class="col-sm-10">
                <input type="text" placeholder="UserId" ng-model="UserId">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">CardNo:</label>
            <div class="col-sm-10">
                <input type="text" placeholder="CardNo" ng-model="CardNo">
            </div>
        </div>
    </form>
    <div style ="width:700px;float:right">
        <button class="btn btn-success" id="Submit" ng-click="getBinLookUp()">
            <span class="glyphicon glyphicon-send "></span>  Submit
        </button>
    </div>
    <h3>Output:</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">ReturnCode</label>
            <div class="col-sm-10">
                <input type="text" ng-disabled="true" ng-model="data.ReturnCode" placeholder="ReturnCode" id="ReturnCode">                    
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Return Message</label>
            <div class="col-sm-10">
                <input type="text" ng-disabled="true"  ng-model="data.ReturnMessage" placeholder="ReturnMsg" id="ReturnMsg">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Card Company:</label>
            <div class="col-sm-10">
                <input type="text" ng-disabled="true" ng-model="data.Company" placeholder="CardCompany" id="CardCompany">

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Charge Type:</label>
            <div class="col-sm-10">
                <input type="text" ng-disabled="true" ng-model="data.ChargeType" placeholder="ChargeType">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">GEICO Card IND:</label>
            <div class="col-sm-10">
                <input type="text" ng-disabled="true" ng-model="data.GEICOCardInd" placeholder="GEICOCardIND">
            </div>
        </div>
    </form>

</div>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="~/Scripts/jquery-2.1.3.js"></script>   
<script>
    var app = angular.module("binLookUpMdl", []);

    app.controller("binLookUpController", function ($scope) {
        $scope.SalesService = '';
        $scope.PlatForm = '';
        $scope.SegMent = '';
        $scope.Path = '';
        $scope.UserId = '';
        $scope.CardNo = '';
        $scope.ReturnCode = '';
        $scope.ReturnMessage = '';
        $scope.Company = '';
        $scope.ChargeType = '';
        $scope.GEICOCardInd = '';
        $scope.data = {};

        $scope.getBinLookUp = function () {
            //alert("JHi");
            var inputs = {};
            inputs.SalesService = $scope.SalesService;
            inputs.PlatForm = $scope.PlatForm
            inputs.SegMent = $scope.SegMent;
            inputs.Path = $scope.Path;
            inputs.UserId = $scope.UserId;
            inputs.CardNo = $scope.CardNo;               
            $.ajax({
                url: "/Home/getBinLookUp",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",                    
                data: JSON.stringify(inputs),
                success: function (result) {
                    //alert(JSON.stringify(result));
                    $scope.data = result[0];                        
                }
            });

            }

});
</script>

Answer 1

在$scope.$apply();

之后尝试使用$scope.data = result[0];

Answer 2

不要使用jquery的$ ajax来获取数据。 Angularjs不知道非角度http调用的任何变化。使用angularjs＆＃39; $ http.get来获取数据。另一个解决方案是使用$ timeout或$ apply包装$ ajax调用。

在AngularJS $ scope.data首次更新时单击按钮第二次单击其workind

2 个答案: