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>

当用户点击Find Matches按钮时，会调用hasrsine函数，该函数会将人的经度和经度传递给它，并且api会在该人区域内与志愿者做出回应：

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

现在，当触发该功能时，它应该更新视图，我认为这是我遇到的问题：

// 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要求我对角度变量使用双括号）。

谢谢！

Answer 1

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

将我的应用声明更改为

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

所有{{到[[和}}到]]解决了这个问题。

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

1 个答案: