AngularJS JSON处理（例如ng-repeat）

Question

I'm trying to process json data in following manner:

$scope.activities = response.data;
console.log($scope.activities.length);
var list = [];
for (var i = 0; i < $scope.activities.length; i++) {
    console.log($scope.activities[i].name);
    list.push($scope.activities[i].name);
}
var input = document.getElementById("myinput");
new Awesomplete(input, {
    list: list
}); 

Or how it's possible too (another case, but same principle):

<li ng-repeat="navItem in navItems" ng-click="itemClicked(item, $index)" ng-class="{'nav_list_item-current' : navItem.selected} " class="nav_list_item pure-u-md-1-{{navItemsCount}} pure-u-1-1">
    <a class="nav_list_item_link" href="{{navItem.link}}">
        {{navItem.name}}
    </a>
</li>

Where navItems is a JSON object.

How is this possible in angular, I mean it's working but not really nice ?

Answer 1

Note that you could put your awesomecomplete code in a directive to have "clean angular", but that's not really a five minute thing. Here is your database call data assignment simplified:

YourDatabaseCall().then(function(activitiesDataFromDb){
    //the _.pluck method gets you an array of activity names
    $scope.activities = _.pluck(activitiesDataFromDb, 'name');

    var input = document.getElementById("myinput");
    new Awesomplete(input, {
        list: list
    }); 
});

See http://underscorejs.org/#pluck , to copy their description of the pluck helper:

A convenient version of what is perhaps the most common use-case for map: extracting a list of property values. And their eexample:

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"] 

Answer 2

Use Array.prototype.map

var input = document.getElementById("myinput");

$scope.activities = response.data;

var activityNames = $scope.activities.map(function(item){
    return item.name;
});

new Awesomplete(input, {
    list: activityNames
});

or even shorter

var input = document.getElementById("myinput");

new Awesomplete(input, {
    list: response.data.map(function(item){
        return item.name;
    })
});