-3
A
答えて
0
値が"md-selected-item"の場合、探している文字列ではなく、文字列が返されず、選択したオブジェクトが返されます。以下の例のhere
出力 md-selected-item:の例{"value":"alabama","display":"Alabama"}例を試してみてください。
ng-modelはどこで宣言すればよいですか？
初期値をctrl.selectedItemと宣言できます。ここでは、self.selectedItem = {"value":"alaska","display":"Alaska"};が状態を自動的に選択すると宣言しました。コントローラのオブジェクトプロパティにアクセスするだけで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>関連する問題
- 1. JqueryオートコンプリートとGmailのオートコンプリート
- 2. オートコンプリート
- 3. jqueryオートコンプリート
- 4. lwuitオートコンプリート
- 5. オートコンプリートJSON
- 6. Parsekitオートコンプリート
- 7. オートコンプリートは
- 8. NSTextFieldオートコンプリート
- 9. JTextFieldオートコンプリート
- 10. オートコンプリートJSON
- 11. オートコンプリート8
- 12. Mootoolsオートコンプリート
- 13. onkeydown、オートコンプリート
- 14. オートコンプリートjquery
- 15. dojoオートコンプリート
- 16. オートコンプリート - アンドロイド
- 17. オートコンプリートAngularJS
- 18. オートコンプリート〜ajax
- 19. ブートストラップ - TagsInputでオートコンプリート
- 20. オートコンプリートのプレースエディタ
- 21. JqueryUiオートコンプリートは：
- 22. TextBox MDBのオートコンプリート
- 23. オートコンプリートとアヤックス
- 24. オートコンプリート付きCkeditor？
- 25. Elasticsearch.js AngularJSオートコンプリート
- 26. データベースからオートコンプリート
- 27. jQueryのオートコンプリートは
- 28. Netbeansのオートコンプリート
- 29. MD-オートコンプリートのみ
- 30. Excelセルでオートコンプリート？
あなたはあなたがしようとしたものを私たちを見ることができますしてください？質問を2つの別々の投稿に分割してみてください。 1つはngモデル用で、もう1つはmongoに保存します。 – Pureferret