binding to controller object in Angular

Question

I'm new to angular, trying to bind an an element's content into the controller's Scope to be able to use it within another function:

here is the scenario am working around:

I want the content of the <span> element {{y.facetName}} in

<span ng-model="columnFacetname">{{y.facetName}}</span>

to be sent to the controller an be put in the object $scope.columnFacetname in the controller

Here is a snippet of what I'm working on:

<div ng-repeat="y in x.facetArr|limitTo: limit track by $index ">
        <div class="list_items panel-body ">
            <button class="ButtonforAccordion" ng-click="ListClicktnColumnFilterfunc(); onServerSideButtonItemsRequested(ListClicktnColumnFilter, myOrderBy)">
                <span>{{$index+1}}</span>
                <span ng-model="columnFacetname">{{y.facetName}}</span>
                <span>{{y.facetValue}}</span>
            </button>
        </div>
</div>

angular.module('mainModule').controller('MainCtrl', function($scope, $http) {
                $scope.columnFacetname = "";
                $scope.ListClicktnColumnFilter = "";
                $scope.ListClicktnColumnFilterfunc = function() {
                    $scope.ListClicktnColumnFilter = "\":\'" + $scope.columnFacetname + "\'";
                };
            }

the problem is that the $scope.ListClicktnColumnFilter doesn't show the $scope.columnFacetname within it, meaning that the $scope.columnFacetname is not well-binded.

you are looping via ng-repeat so how to you expect to map multiple/different y.facetName values to map to single columnFacetname variable? — kachhalimbu
– kachhalimbu, Commented May 19, 2015 at 8:43
@kachhalimbu I am mapping the item that is clicked, and it works. when the element is clicked the value will be added to the scope's object.. Thank you anyway :) — Hassanation
– Hassanation, Commented May 19, 2015 at 11:24

Alhuck · Accepted Answer · 2015-05-19 09:51:26Z

2

In your ng-click instead of calling two different function

ng-click="ListClicktnColumnFilterfunc(); onServerSideButtonItemsRequested(ListClicktnColumnFilter, myOrderBy)"

you can declare like this

ng-click="columnFacetname = y.facetName; onServerSideButtonItemsRequested(columnFacetname , myOrderBy)"

You are trying to pass that model to another function by assigning it to ListClicktnColumnFilter in your controller

By doing in this way, you can achieve the same thing.

I have done one plunker with sample array,

http://embed.plnkr.co/YIwRLWXEOeK8NmYmT6VK/preview

Hope this helps!

answered May 19, 2015 at 9:51

Alhuck

1,0298 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hassanation Over a year ago

That is correct @Alhuck A , I used that way and it worked.. Here is how i used it ng-click="ListClicktnColumnFilterfunc(x.facetOuterName,y.facetName)" Thank you

Collectives™ on Stack Overflow

binding to controller object in Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related