Angular-Material自动完成打印所有Json

时间:2017-02-03 19:44:43

标签: angularjs firebase firebase-realtime-database angular-material

我正在尝试使用Firebase作为数据库的角度素材使用自动完成指令。我试图从他们的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>

但是当我尝试在我的示例中仅打印 diagnostico.DiagnosticDescription 的值时...打印所有ID。

我的代码:

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

我的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”:

md-autocomplete

但是当我选择结果时看看是什么打印:

all the value

我的Firebase数据库: Firebase-Database

最后,如果我使用带有.json的url到最后我可以得到我需要的东西。

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

结果就是我需要打印的内容!:

"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."

希望有人能帮助我。

感谢。

2 个答案:

答案 0 :(得分:0)

目前还不完全清楚您尝试使用DiagnosticDescription做什么,但Angular Material文档显示md-item-template应位于md-autocompleteexample)的结束标记内。

尝试

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

这更接近你想要的吗?

由于您要在diagnostico的{​​{1}}属性中定义md-itemsmd-autocomplete只应在diagnostico的结束标记中提供。

答案 1 :(得分:0)

最后,我可以得到解决方案,主要问题是我在λ> gcc -std=c11 -Wall -Wextra -Wpedantic warning_gcc_42035769.c warning_gcc_42035769.c: In function ‘main’: warning_gcc_42035769.c:13:5: warning: null argument where non-null required (argument 1) [-Wnonnull] printf("%s and %s is %d\n", str1, str2, own_strcmp(NULL, str2)); ^ 中创建了一个objetct,并且我尝试从md-selected-item="diagnostico.DiagnosticName"获取数据,但是&#34;正确的方式&#34;将是:

diagnostico.DiagnosticDescription

所以,我将diagnostico.DiagnosticName.DiagnosticDescription 重新命名为: diagnostico

最终结果:

md-selected-item

这对我有用。