

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

[code]

        <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">
    
        //以下２行を消すと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>
    
[/code]

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


CC BY-SA 3.0
2015-07-16T12:25:44.277
12421
2015-12-13T18:38:03.103
10558
question
monaca onsen-ui angularjs
angular-resourceを使うとonsenuiが動かない

[code]

    //以下２行を消すと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();
    }]);
    
[/code]

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

[code]

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


CC BY-SA 3.0
2015-07-16T14:01:36.033
12424
2015-07-16T14:01:36.033
3516
12421
answer