当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Angular-Material autocomplete print all Json

问题描述:

I'm trying to use the autocomplete directive from angular material using Firebase as database. I have tried to implement the example from their CodePen

<div ng-app="app" ng-controller="mainController">

'data' array: {{data}}

<md-divider style="margin: 20px"></md-divider>

Changing this value does not reflect changes to 'data' array:

<div ng-repeat="dataItem in data track by $index">

<md-autocomplete md-selected-item="data[$index]" md-search-text="searchText.name" md-items="item in items | filter:searchText" md-item-text="item.name">

<span>{{item.name}}</span>

</md-autocomplete>

Data item {{$index}} inside ng-repeat: {{dataItem}}</br>

</div>

but when i try to print just the value of diagnostico.DiagnosticDescription in my example... print all the id.

my code:

<md-autocomplete md-selected-item="diagnostico.DiagnosticDescription" md-search-text="searchText.DiagnosticName" md-items="diagnostico in diagnosticos | filter:searchText" md-item-text="diagnostico.DiagnosticName" placeholder="Search" md-min-length="1" md-clear-button="true">

<span>{{diagnostico.DiagnosticName}}</span>

</md-autocomplete>

<md-item-template>

<span>{{diagnostico.DiagnosticDescription}}</span>

</md-item-template>

my App.js:

var myApp=angular.module('myApp', ['firebase', 'angucomplete-alt', 'ngclipboard', 'ngMaterial', 'ngMessages']);

myApp.controller('DiagnosticCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray){

var myDiagnostic = firebase.database().ref();

$scope.diagnosticos = $firebaseArray(myDiagnostic);

}]);

md-autocomplete "working":

but look what print when i select a result:

My Firebase database:

Finally, if i use the url with .json to the end i can get what i need.

https://diagnosticos-c6b78.firebaseio.com/-KbrsEXh-mWvVBlx__yw/DiagnosticDescription.json

The result is what i need print!:

"Fraccionar la comida 5 -6 veces por día, porciones controladas y varios grupos de alimentos. Aunque es importante el consumo de frutas y verduras, debe evitar incluir verduras de hoja y color verde como: espinaca, brócoli, lechuga, habichuela, coliflor, estos contribuyen mas a que se formen cristales de calcio. No mezclar el consumo de leche, yogurt, kumis, queso con alimentos vegetales. Se deben consumir alejados de comidas principales como en media mañana y media tarde. Evitar consumo de café (tinto o café con leche) Consumir entre 5 -8 vasos de agua por día."

Hope that anyone can help me.

Thanks.

网友答案:

It's not totally clear what you are trying to do with DiagnosticDescription, but the Angular Material docs show that md-item-template should be inside the closing tag of md-autocomplete (example).

Try

<md-autocomplete md-selected-item="diagnostico.DiagnosticDescription" md-search-text="searchText.DiagnosticName" md-items="diagnostico in diagnosticos | filter:searchText" md-item-text="diagnostico.DiagnosticName" placeholder="Search" md-min-length="1" md-clear-button="true">  
    <md-item-template>
        <span>{{diagnostico.DiagnosticName}}</span>
        <span>{{diagnostico.DiagnosticDescription}}</span>
    </md-item-template>
</md-autocomplete> 

Is that closer to what you want?

Since you are defining diagnostico in the md-items attribute of your md-autocomplete, diagnostico should only be available inside md-autocomplete's closing tag.

网友答案:

Well finally i can get the solution, the main problem was that i created an objetct in md-selected-item="diagnostico.DiagnosticName" and i've try to get the data from diagnostico.DiagnosticDescription, but the "correct way" will be:

diagnostico.DiagnosticName.DiagnosticDescription

so, i re-name my md-selected-item to: diagnostico

finally result:

<md-autocomplete md-selected-item="diagnostico" md-search-text="searchText.DiagnosticName" md-items="diagnostico in diagnosticos | filter:searchText" md-item-text="diagnostico.DiagnosticName" placeholder="Search" md-min-length="1" md-clear-button="true">  
<md-item-template>
    <span>{{diagnostico.DiagnosticName}}</span>
    <span>{{diagnostico.DiagnosticDescription}}</span>
</md-item-template>

and that works for me.

分享给朋友:
您可能感兴趣的文章:
随机阅读: