角度列表未在监视中更新

Question

I have been using some angular controllers for get/post requests a few times and thus not too experienced with angular (or JS in any way, I'm the backend type not frontend), but got a problem I have been trying to solve past week for a private project, without success. I tried any solution I could find here. Hopefully someone can help.

I get 1x JSON object from backend containing 4x strings, and a list of strings.

{
  'var1':'abc',
  'var2':'def',
  'var3':'ghi',
  'var4':'jkl',
  'images':['images/abcd.jpg', 'images/efgh.jpg']
}

The gui updates all 4 strings but not the list.

Controller:

app.controller('ObjectInfoController', function ($scope, $window, $http) {

        $scope.$watch('images', function(newValue, oldValue) {
            alert(newValue);
        });

        $http.post("http://localhost:8080/view_object/", postdata).then(
            function(data, status, headers, config) {
            $scope.var1 = data.data.var1;
            $scope.var2 = data.data.var2;
            $scope.var3 = data.data.var3;
            $scope.var4 = data.data.var4;
            $scope.images = data.data.images;
            $scope.$digest();
        },
        function(err) {
            // Do something
        }
    );
});

HTML:

<div class="row" ng-controller="ObjectInfoController">
    <div class="col-md-3">
        <!-- Images -->
        <div class="owl-carousel content-slider-with-controls-autoplay">
            <div class="overlay-container overlay-visible" ng-repeat="image in images">
                <img src="{{image}}" alt="">
                <div class="overlay-bottom hidden-xs">

                </div>
                <a href="{{image}}" class="popup-img overlay-link"><i class="icon-plus-1"></i></a>
            </div>
        </div>
        <!-- Images end -->
    </div>
    <div class="col-md-8 pv-30 TextBlock bottomFix">
        <h2 class="TextBlockTitle">{{var1}}</h2>
        <ul class="nav">
            <li class="icon-right-open-outline"><strong>{{var2}}</strong></li>
            <li class="icon-right-open-outline"><strong>{{var3}}</strong></li>
            <li class="icon-right-open-outline"><strong>{{var4}}</strong></li>
    </ul>
  </div>
</div>

I saw people using watches to fix this problem (although I do not get why the list needs it but not remaining data), but cannot get it to work.

See the alert() I do inside the watch? With that alert I get the images in my ng-repeat and all looks good. Removing the alert, and it doesn't work. Does an alert do some sort of "update" to the view, and can I force it without alerting?

I actually get 2 alerts popping up, first is empty and second prints my list, but that is normal I found out. I tried setting $scope.images inside watch too, with no luck.

I feel there is either something trivial I didn't understand, or I should not use watch but something else? Please enlighten me if you know what I am doing wrong. I feel clueless by now.

And thanks for your time.

Edit: just did a random test and typed {{images[0]}} after {{var1}} and the correct value was written out on the page.... so the problem seems to only exist in my ng-repeat.

Answer 1

I don't see a reason why you would need the $watch. You also shouldn't call $digest unless you have a specific reason to do so.

It's a good idea to use the controllerAs-syntax as it makes the scope exlicit. Change your controller declaration in the html to <div class="row" ng-controller="ObjectInfoController as vm"> , and refer to your variables through vm in the template, eg ng-repeat="image in vm.images" .

app.controller('ObjectInfoController', function ($http) {
    var vm = this;

    $http.post("http://localhost:8080/view_object/", postdata).then(
        function(data, status, headers, config) {
            vm.var1 = data.data.var1;
            vm.var2 = data.data.var2;
            vm.var3 = data.data.var3;
            vm.var4 = data.data.var4;
            vm.images = data.data.images;
        },
        function(err) {
            // Do something
        }
    );
});

JSFiddle

Also, you should use ng-src instead of src when you use variables in the img-element source.

If it still doesn't work, I suspect the problem has something to do with owl-carousel - try to loop over the images variables outside the owl-carousel.

Answer 2

If it is possible two values in the images array are equal, change your ng-repeat expression to

ng-repeat="image in images track by $index"

ng-repeat with primitives requires some care. I'd have just suggested this in a comment but I don't have the rep.

See this and this

Answer 3

Its because you are using primitive datatype and not object which provide two-way data binding.

Primitive datatype is not provide two-way data binding.

vm.var1, vm.var2 etc are primitive datatype.

You should changes the script and html as follows.

JS:

$http.post("http://localhost:8080/view_object/", postdata).then(
            function(data, status, headers, config) {
            $scope.objData = data.data;
        },
        function(err) {
            // Do something
        }

HTML :

<ul class="nav">
    <li class="icon-right-open-outline"><strong>{{objData.var2}}</strong></li>
    <li class="icon-right-open-outline"><strong>{{objData.var3}}</strong></li>
    <li class="icon-right-open-outline"><strong>{{objData.var4}}</strong></li>
</ul>

Answer 4

Actually, all answers worked. Even my original code worked (which was a modified copy/paste from another page I used ng-repeat on. I found out by performing same ng-repeat code in a new div before the one that didn't work, just printing the {{image}} and had no problems.

Problem I took for granted past few days were located in my controller, was actually a css problem...

Im sorry for wasting time, but thankful to learn a bit more about what the different code you posted is for :)