2

Onsen UI 最小限のテンプレートに下記URLを参考にした検索を組み込みたいのですが
競合してしまっているのかonsenui、検索システムどちらかしか動きません。
http://www.walbrix.com/jp/blog/2014-01-angularjs-resource.html

    <html lang="ja" ng-app="MyApp">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">

    <script src="components/monaca-onsenui/js/angular/angular.js"></script>
    <script src="components/angular-resource/angular-resource.min.js"></script>
    <script src="components/monaca-onsenui/js/onsenui.js"></script>
    <script language="javascript">

    //以下2行を消すとjsonの内容が表示される(検索システムは動く)
      var module = ons.bootstrap('MyApp', ['onsen']);
      module.controller('AppController', function($scope) { });

    //以下を消すとonsenuiが反映される(検索システムは動かない)
    var app = angular.module('MyApp', ['ngResource']);
    app.controller('MyController', ['$scope','$resource',function($scope,$resource) {
            var contents = $resource('./contents2.json');
            $scope.contents = contents.query();
        }]);

    </script>
    <title>素材検索</title>
  </head>
  <body>

<!--トップページ-->
    <ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
      <ons-toolbar>
        <div class="center">検索</div>
      </ons-toolbar>
      <br>

      <div class="container" ng-controller="MyController">
          <input type="test" class="search-input" style="width: 96%; margin: 10px auto;" placeholder="Search" ng-model="postalNumber">
              <dl class="dl-horizontal">
            <dt ng-repeat-start="entry in contents | filter:postalNumber">{{entry[0]}}({{entry[2]}})</dt>
            <dd ng-repeat-end>{{entry[3]}}</dd>
              </dl>
        </div>

    </ons-page>
</ons-navigator>
  </body>
</html>

contents2.jsonは以下のような記載としています。
[
["素材名","素材種類","素材説明1","素材説明2"]
]
ご教示いただけますと幸いです。
よろしくお願いいたします。

1
  • @ita_3y ありがとうございます!差し替えてみたところ問題なく動作しました!1つにまとめることもできるんですね。勉強になりました
    – wai8410
    Commented 2015年7月17日 14:45

1 件の回答 1

1
//以下2行を消すとjsonの内容が表示される(検索システムは動く)
var module = ons.bootstrap('MyApp', ['onsen']);
module.controller('AppController', function($scope) { });

//以下を消すとonsenuiが反映される(検索システムは動かない)
var app = angular.module('MyApp', ['ngResource']);
app.controller('MyController', ['$scope','$resource',function($scope,$resource) {
    var contents = $resource('./contents2.json');
    $scope.contents = contents.query();
}]);

をこんな感じにしてみたらどうですか?

var module = angular.module('MyApp', ['onsen', 'ngResource']);
module.controller('MyController', ['$scope', '$resource', function($scope, $resource) {
    var contents = $resource('./contents2.json');
    $scope.contents = contents.query();
}]);

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。