在AngularJS中，$scope.data第一次更新，点击按钮，第二次点击它的工作

Question

在这里，当我第一次单击按钮时，我传递了 6 个输入并获得 6 个输出字段$scope如果我第二次单击按钮，则 $scope.data 绑定或更新 UI 中的数据，则 .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

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

Answer 2

$scope.data = result[0];后尝试使用$scope.$apply();