自動完成對角材料

-3

我應該在哪裏申報角JS材料以及如何存儲的它在MongoDB中值的md-autocomplete標籤NG-模式？

2017-03-09 deeps

請你能告訴我們你試圖做什麼？請嘗試將您的問題分成兩個獨立的帖子。一個用於ng模型，另一個用於mongo。 – Pureferret

"md-selected-item"的值是您要查找的值，它不返回字符串，而是返回您選擇的對象。嘗試的示例here
md-selected-item:
例的示例下面{"value":"alabama","display":"Alabama"}的輸出。

我應該在哪裏聲明ng-model？
您可以將您的初始值聲明爲ctrl.selectedItem。在這裏我宣稱self.selectedItem = {"value":"alaska","display":"Alaska"};自動選擇一個狀態。您只需訪問控制器中的對象屬性並在post服務中發送即可存儲在mongodb中。

<html lang="en" > 
 
    <head> 
 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
 
\t <script language="javascript"> 
 
     angular 
 
      .module('firstApplication', ['ngMaterial']) 
 
      .controller('autoCompleteController', autoCompleteController); 
 

 
     function autoCompleteController ($timeout, $q, $log) { 
 
      var self = this; 
 
      self.simulateQuery = false; 
 
      self.isDisabled = false; 
 
      // list of states to be displayed 
 
      self.states  = loadStates(); 
 
      self.querySearch = querySearch; 
 
      self.selectedItemChange = selectedItemChange; 
 
      self.searchTextChange = searchTextChange; 
 
      self.selectedItem = {"value":"alaska","display":"Alaska"}; 
 
      self.newState = newState; 
 
      function newState(state) { 
 
       alert("This functionality is yet to be implemented!"); 
 
      }  
 
      function querySearch (query) { 
 
       var results = query ? self.states.filter(createFilterFor(query)) : self.states, deferred; 
 
       if (self.simulateQuery) { 
 
       deferred = $q.defer(); 
 
       $timeout(function() { 
 
         deferred.resolve(results); 
 
        }, 
 
\t \t    Math.random() * 1000, false); 
 
       return deferred.promise; 
 
       } else { 
 
       return results; 
 
       } 
 
      } 
 
      function searchTextChange(text) { 
 
      debugger; 
 
       $log.info('Text changed to ' + text); 
 
      } 
 
      function selectedItemChange(item) { 
 
       $log.info('Item changed to ' + JSON.stringify(item)); 
 
      } 
 
      //build list of states as map of key-value pairs 
 
      function loadStates() { 
 
       var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\ 
 
       Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\ 
 
       Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\ 
 
       Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\ 
 
       North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\ 
 
       South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\ 
 
       Wisconsin, Wyoming'; 
 
       return allStates.split(/, +/g).map(function (state) { 
 
       return { 
 
        value: state.toLowerCase(), 
 
        display: state 
 
       }; 
 
       }); 
 
      } 
 
      //filter function for search query 
 
      function createFilterFor(query) { 
 
       var lowercaseQuery = angular.lowercase(query); 
 
       return function filterFn(state) { 
 
       return (state.value.indexOf(lowercaseQuery) === 0); 
 
       }; 
 
      } 
 
     } 
 
\t </script>  
 
    </head> 
 
    <body ng-app="firstApplication" ng-cloak> 
 
     <div ng-controller="autoCompleteController as ctrl" layout="column" ng-cloak> 
 
      
 
     <md-content class="md-padding"> 
 
      <form ng-submit="$event.preventDefault()"> 
 
       <p><code>md-autocomplete</code> can be used to provide search results from local or remote data sources.</p> 
 
       <md-autocomplete 
 
        ng-disabled="ctrl.isDisabled" 
 
        md-no-cache="ctrl.noCache" 
 
        md-selected-item="ctrl.selectedItem" 
 
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" 
 
        md-search-text="ctrl.searchText" 
 
        md-selected-item-change="ctrl.selectedItemChange(item)" 
 
        md-items="item in ctrl.querySearch(ctrl.searchText)" 
 
        md-item-text="item.display" 
 
        md-min-length="0" 
 
        placeholder="US State?"> 
 
        <md-item-template> 
 
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span> 
 
        </md-item-template> 
 
        <md-not-found> 
 
        No states matching "{{ctrl.searchText}}" were found. 
 
        <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a> 
 
        </md-not-found> 
 
       </md-autocomplete> 
 
       <br/> 
 
       Output {{ctrl.selectedItem}} 
 
      </form> 
 
     </md-content> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-03-09 13:19:00 nivas

自動完成對角材料

回答

相關問題