Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>TarranJones, this Plunker should clear things up. Hard to give you a 100% clear answer without a look at your data. You should be able to figure it out from here. </p> <p><a href="http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview" rel="nofollow">http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview</a></p> <p>To Answer your question in the comments I would replace:</p> <pre><code>app.controller('MainCtrl', function($scope) { $scope.colors = [ {name:'black', shade:'dark'}, {name:'white', shade:'light'}, {name:'red', shade:'dark'}, {name:'blue', shade:'dark'}, {name:'yellow', shade:'light'} ]; }); </code></pre> <p>With: </p> <pre><code>app.controller('MainCtrl', function($scope, $http) { $http.get('http://www.foo.com') .success(function(data) { $scope.colors = data; }) .error(function() { console.log('My name is Error, now eat it!); }); }); </code></pre> <p>Make sure to inject the $http.</p> <p>Plunker here. <a href="http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview" rel="nofollow">http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview</a></p> <p>UPDATE: </p> <p>Tarran also ran into the problem of filtering a single returned JSON object from an API. Angular Filters can only accept arrays and so would not accept the object. In order for Tarran to filter the object he must first iterate through the object and store the object properties to an array. Once the array is then returned to the $scope you can filter the results. The plunker and code is provided below: <a href="http://plnkr.co/edit/9M3zZFN5jyV8w7fg7EE3?p=preview" rel="nofollow">http://plnkr.co/edit/9M3zZFN5jyV8w7fg7EE3?p=preview</a></p> <p>Controller:</p> <p>$http.get('<a href="http://graph.facebook.com/4" rel="nofollow">http://graph.facebook.com/4</a>') .success(function(data) {</p> <pre><code> //CREATE AN EMPTY ARRAY result = []; //ITERATES THROUGH THE OBJECT SAVING THE OBJECTS PROPERTIES TO ARRAY for (var i in data) { if (data.hasOwnProperty(i)) { //PUSHES THE PROPERTIES ONTO THE ARRAY result.push(data[i]); } } //SETS THE NEW DATASET TO THE ARRAY AND RETURNS TO $SCOPE $scope.dataset = result; }); </code></pre> <p>HTML:</p> <pre><code> {{dataset}} &lt;BR&gt; &lt;BR&gt;Search: &lt;input type="search" ng-model="searchText" /&gt; &lt;BR&gt; &lt;BR&gt; &lt;select&gt; &lt;option ng-repeat="data in dataset | filter: searchText"&gt;{{data}}&lt;/option&gt; &lt;/select&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload