Get filtered data only on model object as result, angularjs

Question

My code is like this

<body ng-app="myApp" ng-controller="MainCtrl">
<div>Name only
    <input ng-model="search.name" />
    <br />
    <table id="searchObjResults">
        <tr>
            <th>Name</th>
            <th>Phone</th>
        </tr>
        <tr ng-repeat="friendObj in friends  | filter:search:strict  | limitTo:1">
            <td>{{friendObj.name}}</td>
            <td>{{friendObj.phone}}</td>
        </tr>
    </table>
</div>
<div>
    <button type="button" id="btn_submit" ng-click="submitForm()">Get rates</button>
</div>

    angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
    $scope.friends = [{
        name: 'John',
        phone: '555-1276'
    }, {
        name: 'Mary',
        phone: '800-BIG-MARY'
    }, {
        name: 'Mike',
        phone: '555-4321'
    }, {
        name: 'Adam',
        phone: '555-5678'
    }, {
        name: 'Julie',
        phone: '555-8765'
    }, {
        name: 'Juliette',
        phone: '555-5678'
    }];


    $scope.submitForm = function () {
        // i want to get the data here
    };

}]);

As you can see at a time only one friend will be active on my screen. when I press my submit button, I want that data (filtered single row) to be the only value on my current $scope.friends so that I can send it to an external service as the selected data. Can any one point out what i need to do here Fiddle

Note: I can't change the position of this button.

Ben Heymink · Accepted Answer · 2014-10-14 12:46:17Z

5

Why not make your button part of the table row, since there will only ever be one? Here is a JSFiddle showing it working in that fashion.

The ng-click function handler for the button can then simply take a parameter that is the actual friendObj you are interested in:

 <button type="button" ng-click="submitForm( friendObj )">Get rates</button>

EDIT: There is actually a way to do this if you can't move the button; make the ng-repeat operate over a NEW array, which will be accessible outside of the ng-repeat. So your ng-repeat statement becomes:

<tr ng-repeat="friendObj in newArray = (friends  | filter:search:strict  | limitTo:1)">

And then your button can simply reference the one-element array:

<button type="button" ng-click="submitForm( newArray )">Get rates</button>

Updated Fiddle here :-)

edited Oct 14, 2014 at 12:46

answered Oct 14, 2014 at 12:29

Ben Heymink

1,70012 silver badges26 bronze badges

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

3 Comments

None Over a year ago

I can't really change the position of that button. its out of question

Ben Heymink Over a year ago

Ok, then you'll have to do something along the lines of what Eric mentioned - either using-change or a watch, and store what the selection is everytime it updates :)

None Over a year ago

Your second answer is awesome.Thanks

MarcoS · Accepted Answer · 2014-10-14 12:43:19Z

2

Try this:

$scope.submitForm = function () {
  var data = $filter('filter')($scope.friends, $scope.search.name);
};

Fiddle here.

answered Oct 14, 2014 at 12:43

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Comments

Eric Eskildsen · Accepted Answer · 2014-10-14 13:02:50Z

2

If you put the filter in the controller instead of the view, you could set a variable like $scope.result that the submitForm function could use. For example, in your HTML, you could add an ng-change directive to your search field like so:

<input ng-model="search.name" ng-change="updateResult()" />

Then, instead of using ng-repeat, you'd use ng-show to show the one result, or hide the row if there is no result:

<tr ng-show="result">
    <td>{{result.name}}</td>
    <td>{{result.phone}}</td>
</tr>

Then in your controller:

$scope.search = {name: ''};
$scope.updateResult = function() {
    $scope.result = $filter('filter')($scope.friends, $scope.search.name)[0];
}
$scope.updateResult();

// ...

$scope.submitForm = function() {
    // $scope.result can be used here
}

EDIT: The advantage of this approach is it's a bit DRYer because you don't re-filter inside submitForm. MarcoS's approach has the advantage of being a lot shorter!

edited Oct 14, 2014 at 13:02

answered Oct 14, 2014 at 12:34

Eric Eskildsen

4,9403 gold badges52 silver badges59 bronze badges

1 Comment

Ben Heymink Over a year ago

Interesting answer, I was considering mentioning that, but it does have the downside that the updateResult() function will be called for every keypress. Perhaps ok in this example, but should be noted!

Collectives™ on Stack Overflow

Get filtered data only on model object as result, angularjs

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related