类型错误：对象不是一个函数 - 获取收集的数据采用了棱角分明/导轨 [英] TypeError: object is not a function - fetching collection data using Angular / rails

问题描述

确定这是从学习的角度三部曲今天的最后一个问题：

ok this is the last question from todays trilogy of learning Angular:

<一个href=\"http://stackoverflow.com/questions/18312689/how-to-fetch-index-data-in-angular-using-rails-server\">part1

<一个href=\"http://stackoverflow.com/questions/18314258/uncaught-error-no-module-users-angularjs\">part2

我收到以下面的错误（试图选择用户视图时：

I am getting to following error(when trying to select user in view:

TypeError: object is not a function
    at Object.source (http://localhost:3000/assets/angular.js?body=1:6300:13)
    at getMatchesAsync (http://localhost:3000/assets/angular-ui-bootstrap.js?body=1:1820:30)
    at http://localhost:3000/assets/angular-ui-bootstrap.js?body=1:1871:13
    at http://localhost:3000/assets/angular.js?body=1:12030:15
    at Array.forEach (native)
    at forEach (http://localhost:3000/assets/angular.js?body=1:134:11)
    at $setViewValue (http://localhost:3000/assets/angular.js?body=1:12029:5)
    at http://localhost:3000/assets/angular.js?body=1:11423:14
    at Object.Scope.$eval (http://localhost:3000/assets/angular.js?body=1:7994:28)
    at Object.Scope.$apply (http://localhost:3000/assets/angular.js?body=1:8074:23) angular.js?body=1:5688
(anonymous function) angular.js?body=1:5688
(anonymous function) angular.js?body=1:4785
Scope.$apply angular.js?body=1:8076
listener angular.js?body=1:11422
jQuery.event.dispatch jquery.js?body=1:5096
elemData.handle

本code（根据SO答案更新：

with this code (updated according to the SO answers:

  <div ng-app='users'>

    <div class='container-fluid' ng-controller="UsersIndexCtrl">
      <pre>Model: {{result | json}}</pre>
      <input type="text" ng-model="result" typeahead="suggestion for suggestion in users($viewValue)">
    </div>


<script>


    var app = angular.module('users', ['ui.bootstrap', 'ngResource']);

    app.factory('User', function($resource) {
        return $resource("users/:id", { id: '@id' }, {
            index:   { method: 'GET', isArray: true, responseType: 'json' },
            show:    { method: 'GET', responseType: 'json' },
            update:  { method: 'PUT', responseType: 'json' }
        });
    })


    var UsersIndexCtrl = function($scope, User) {
        $scope.users = User.index();
    };


</script>

我想用预输入来从服务器的所有用户。

I am trying to fetch all users from the server using typeahead.

plunker code的最新版本是这里

Latest version of plunker code is here

问题：
1.如何从服务器获取数据的收集，使预输入采用了棱角分明和修改此code运行？
2.这是什么错误意味着，它是如何在连接此code原因。

Questions: 1. How to fetch collection data from server and make typeahead running using angular and modifying this code ?. 2. What does this error means and how it is causes in connection to this code.

推荐答案

您的问题是不是与你的首页的功能，但在预输入指令的使用。这是你想要的（假设你想通过名称属性在用户搜索资源：

Your problem is not with your index function, but in your typeahead directive usage. This is what you want (assuming you want to search by the name property on your User resource:

<div ng-app='users'>
  <div class='container-fluid' ng-controller="UsersIndexCtrl">
    <pre>Model: {{result | json}}</pre>
    <input type="text" ng-model="result" typeahead="user.name for user in users | filter:$viewValue">
  </div>
</div>

我在这里编辑您的 plunker 让您的示例工作：）

这篇关于类型错误：对象不是一个函数 - 获取收集的数据采用了棱角分明/导轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！