AngularJS directives inside ng-repeat do not pass evaluated value

I just started learning AngularJS two days ago, so if you think that I didn’t approach this in the Angular style, then please guide me. So the code below is part of my HTML that has the ng-repeat directive

<div class="row" data-ng-repeat="button in buttons" ng-if="$index % 3 == 0">
   <div class="col-lg-3 col-lg-offset-1">
      <button class="btn btn-default button-width" data-ng-click="my_func('{{buttons[$index].desc}}')">{{buttons[$index].name}}</button>
   </div>
   <div class="col-lg-3 col-lg-offset-1">
      <button class="btn btn-default button-width" data-ng-click="my_func('{{buttons[$index + 1].desc}}')">{{buttons[$index + 1].name}}</button>
   </div>
   <div class="col-lg-3 col-lg-offset-1">
      <button class="btn btn-default button-width" data-ng-click="my_func('{{buttons[$index + 2].desc}}')">{{buttons[$index + 2].name}}</button>
   </div>
</div>

The following code is my Angular controller, which passes values ​​to the ng-repeat directive in HTML, and then the ng-click directive in HTML calls the my_func function in the controller.

remote_app.controller("remote-controller", function($scope, $http) {
    $scope.buttons = [{
        "desc": "OFF_V1",
        "name": "OFF",
    }, {
        "desc": " ",
        "name": " ",
    }, {
        "desc": "SOURCE_1",
        "name": "SOURCE",
    }];
    $scope.my_func = function(command) {
        $http.get("http://localhost:1337?comm=" + command).success(function() {
            $scope.result = "Sent to server - " + command;
        });
    };
})

HTML-, , ng-click, my_func, , , my_func('OFF_V1'), my_func('{{buttons[$index].desc}}'). , , $apply $digest, Angular, .

+4
1

'', , angular . '' angular , . , '', angular ({{}})

data-ng-click="my_func(buttons[$index].desc)"
+3

Source: https://habr.com/ru/post/1607205/


All Articles