2013-12-17 3 views
0

Элемент Select заполняется HTTP-запросом, но параметры в элементе select не обновляются при изменении ng-модели. Я новичок в angularJs, поэтому я предполагаю, что это простое решение. Я пробовал много вариантов без каких-либо положительных результатов.
Элементы заполненной формы JSON, не фильтрующие с использованием фильтра angularJs

<script> 
var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope, $http) {  
$http.get('http://graph.facebook.com/platform') 
.success(function(data) { 
}) 
     }); 
</script> 
<body ng-controller="MainCtrl"> 
    Search: 
    <input type="search" ng-model="searchText" /> 

    <select> 
    <option ng-repeat="item in data | filter: searchText">{{item}}</option> 
    </select> 
    <br> 
    <pre>{{ data | json}}</pre> 
</body> 

http://plnkr.co/edit/C39yVDsG3OcfvwjVSxP9?p=preview

ответ

1

TarranJones, это Plunker должен убрать вещи. Трудно дать вам 100% чистый ответ, не глядя на ваши данные. Вы должны быть в состоянии понять это здесь.

http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview

Чтобы ответить на ваш вопрос в комментариях, я бы заменить:

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'} 
    ]; 
}); 

С:

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!); 
    }); 

}); 

Убедитесь в том, чтобы впрыснуть $ HTTP.

Plunker здесь. http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview

ОБНОВЛЕНИЕ:

Tarran также столкнулись с проблемой фильтрации одного возвращенный объект JSON из API. Угловые фильтры могут принимать только массивы и поэтому не принимают объект. Чтобы Tarran мог фильтровать объект, он должен сначала перебрать объект и сохранить свойства объекта в массив. После того, как массив будет возвращен в область $, вы можете отфильтровать результаты. Plunker и код приведен ниже: http://plnkr.co/edit/9M3zZFN5jyV8w7fg7EE3?p=preview

Контроллер:

$ http.get ('http://graph.facebook.com/4') .success (функция (данные) {

//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; 

}); 

HTML:

{{dataset}} 

    <BR> 
    <BR>Search: 


    <input type="search" ng-model="searchText" /> 


    <BR> 
    <BR> 

    <select> 
    <option ng-repeat="data in dataset | filter: searchText">{{data}}</option> 
    </select> 
+1

Эй, я очень рад, что смогу помочь. Помните меня, отвечая на свой вопрос! – rjm226

+0

iI добавила $ scope.data = {} в функцию FetchCtrl. теперь мне нужно заполнить его данными, полученными от HTTP-запроса. Знаете ли вы, как я мог передавать данные от ребенка к родительской функции? – TarranJones

+1

Я обновил ответ выше, как я продолжу. – rjm226

0

Попробуйте инициализировать свои данные в качестве объекта, прежде всего.

$scope.data = {} 

Или в HTML:

<div ng-controller="FetchCtrl" data-ng-init="data={}; fetch()"> 
+0

Конечно, SCOPE. Я добавил $ scope.data = {} в функцию FetchCtrl. Теперь мне нужно заполнить ее данными, полученными от HTTP-запроса. Как передать данные от ребенка до родителей? надеюсь эта проблема. – TarranJones

Смежные вопросы