Question

Angular的新手，我正在尝试保存表单并在调用后端的PUT或POST调用后更新视图。一旦我从后端收到OK状态，我就会使用最新的响应更新我的模型。但只有指令“ng-click”中的模型才会更新，但其他模型则不会。这是我的代码：

///HTML
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                    <thead>
                    <tr>
                        <th data-toggle="all">Release Title</th>
                        <th data-hide="all">Release Genre</th>
                        <th data-hide="all">UID</th>
                        <th data-hide="all">Classical</th>
                        <th data-hide="all">Tracks</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="album in vm.albums" footable>
      // This one (album.data.title) gets updated but the other ones do not
                        <td ng-click="vm.editAlbum(album, $index)">{{album.data.title}}</small></td>  
                        <td>{{album.data.genre}}</td>
                        <td>{{album.data.uid}}</td>
                        <td ng-if!="album.data.classical">No</td>
                        <td ng-if="album.data.classical">Yes</td>
                        <td>
                            <li ng-repeat="track in album.data.tracks">
                                <a ng-click="vm.selectTrack(album, track)">{{track.title}}</a>
                            </li>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5">
                            <ul class="pagination pull-right"></ul>
                        </td>
                    </tr>
                    </tfoot>
                </table>

这是我的控制器：

// controller.js (Just pasting the saveRelease method that does the on-click event handling in HTML:

(function (){

angular.module('app.uploadedReleases').controller('UploadedReleasesController', UploadedReleasesController);

UploadedReleasesController.$inject = ['$http', '$log', '$scope', '$state', '$rootScope', 'APP_CONFIG'];
function UploadedReleasesController ($http, $log, $scope, $state, $rootScope, APP_CONFIG){

    var vm = this;
    vm.albums = []; // list of all albums

    vm.albumPriority = [0, 4, 6, 8, 10];
    vm.getAlbumTracks = getAlbumTracks;
    vm.editAlbum = editAlbum;
    vm.selectTrack = selectTrack;
    vm.selected = {};
    vm.saveRelease = saveRelease;


    vm.testingAlbumSelected = false;

    return init();

    function init(){

        $http.get('http://localhost:8080/api/releases').then(function(responseData){

            //check the status from the response data.
            vm.responseStatus = responseData.status;
            if(vm.responseStatus !== 200){
                //error message
            }
            // else, Parse the json data here and display it in the UI
            for(var album in responseData.data){
                vm.albums.push({slug: album, data: responseData.data[album]});
            }
        })
    }

        function getAlbumTracks(slug, index){
        $http.get('http://localhost:8080/api/releases/' + slug).success(function(trackResponse){
            //parse each album and get the track list
            vm.showingAlbumIndex = index;
            vm.albums.tracks = [];
            vm.selected = {};
            vm.selected.album = vm.albums[index];
            vm.testingAlbumSelected = true;

            for(var i = 0; i<trackResponse.tracks.length; i++) {
                vm.albums.tracks.push(trackResponse.tracks[i]);
            }
            $log.debug(vm.albums.tracks);

            vm.formAlbum = new Album(vm.selected.album.data.upc,
                                    vm.selected.album.data.title,
                                    vm.selected.album.data.label,
                                    vm.selected.album.data.genre,
                                    vm.selected.album.data.releaseType,
                                    vm.selected.album.data.holdDate,
                                    vm.selected.album.data.priority,
                                    vm.selected.album.data.memo);
        })
    }

    function selectTrack(album, track){
        vm.selected.album = album;
        vm.selected.track = track;
        vm.testingAlbumSelected = false;
    }

function editAlbum(album, index){

        getAlbumTracks(album.slug, index);

        vm.selected = album;
    }

function saveRelease(){

        // Call the PUT request to update the release metadata and refresh the page
        // so that the Album list gets updated with the latest changes
        var url = 'http://localhost:8080/api/releases/' + vm.selected.album.slug;
        $http.put(url, vm.formAlbum).then(function(saveAlbumResponse){
            if(saveAlbumResponse.status === 202){
                //successfully saved response on backend
                // Update the current models to show the newer data

                vm.album.data = vm.formAlbum;
                console.log("album array vm.albums = "+vm.albums);

            }

        })


    }
})();

知道为什么吗？

Answer 1

尝试删除“var vm = this”行。并在控制器中将vm.xxxx重命名为$ scope.xxxx。

视图中的

：删除“vm。”

模型更新后AngularJS视图未更新

1 个答案: