javascript - 将变量传递给 Json API 并使用 ng-repeat 显示响应

Question

我对 AngularJS 还很陌生。我有两张表，一张有需要采访的人员名单

// From vol.xslt
<section id="requested_interviews" class="row">
<h3>Unassigned Requests</h3>
<div class="table-responsive">
    <table id="unassigned_table" class="table table-condensed">
        <tr>
            <th>Requested</th>
            <th>First</th>
            <th>Last</th>
            <th>City</th>
            <th>Region</th>
            <th>Zip</th>
            <th>Country</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="p in prospects">
            <td>{{ p.Requested }}</td>
            <td>{{ p.First }}</td>
            <td>{{ p.Last }}</td>
            <td>{{ p.City }}</td>
            <td>{{ p.Region }}</td>
            <td>{{ p.Zip }}</td>
            <td>{{ p.Country }}</td>
            <td>
                <button class="btn btn-small btn-default btn-block" ng-click="haversine( {{{{p.lat}}}}, {{{{p.lng}}}} )">Find Matches</button>
                <button class="btn btn-small btn-default btn-block" ng-click="viewProspectDetais()">Prospect Details</button>
            </td>
        </tr>
    </table>
</div>

当用户单击“查找匹配项”按钮时，将调用半正弦函数，该函数将人员的纬度和经度传递给该函数，并且 API 会响应该人员所在区域的志愿者:

// From controller
// Volunteer enpoint
$scope.haversine = function(lat, lng) {
    $http.get(-- redact api url --).then(function(response) {
        $scope.volunteers = response.data.row;
    });
};

现在，当函数被触发时，它应该更新 View ，我认为这就是我遇到的问题:

// From vol.xslt
<section id="potential_volunteers" class="row">
<h3>Potential Volunteers</h3>
<table class="table table-hover table-condensed">
    <tr>
        <th>First</th>
        <th>Last</th>
        <th>Street</th>
        <th>Street 2</th>
        <th>Street 3</th>
        <th>City</th>
        <th>Region</th>
        <th>Zip</th>
        <th>Country</th>
        <th>Action</th>
    </tr>
    <tr ng-repeat="v in volunteers">
        <td>{{ v.First }}</td>
        <td>{{ v.Last }}</td>
        <td>{{ v.Street_1 }}</td>
        <td>{{ v.Street_2 }}</td>
        <td>{{ v.Street_3 }}</td>
        <td>{{ v.City }}</td>
        <td>{{ v.Region }}</td>
        <td>{{ v.Postal }}</td>
        <td>{{ v.Country }}</td>
        <td>
            <button class="btn btn-small btn-default btn-block" ng-href="assignInterview()">Assign</button>
            <button class="btn btn-small btn-default btn-block" ng-href="viewVolDetails()">Volunteer Details</button>
        </td>
    </tr>
</table>

我已经验证端点是否有效，并且我的变量在按钮内正确显示(XSLT 要求我对 Angular 变量使用双括号)。

谢谢!

Answer 1

答案是更改应用程序本身的 Angular 变量的开始和结束符号。我猜 XSLT 不喜欢解析 {{ 和 }} 字符。

将我的应用程序声明更改为

var app = angular.module('volApp',[]).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

以及所有 {{ 到 [[ 和 }} 到 ]] 修复了该问题。