CODEWITHSUNDEEP
angularjsonsen-uiangularjs-ng-click
Miguel Ramirez
Miguel Ramirez

Reputation: 28

Angular ng-click onsen

So im new to coding and i cant seem to figure out some issue that i have.

<ons-row ng-click="myNavigator.pushPage('{{building.file}}.html')">

So i started and the {{ building.file }} isn't going to the url. can someone help me or explain why it isnt workking? here is my complete code

    <div ng-init="buildings = [
    {name:'name1',file:'file1', location:'location1', image:'images/img1.jpg', number:'(123) 400-0000'},

  {name:'name2',file:'file2', location:'location2', image:'images/img2.jpg', number:'(123) 400-0000'},

  {name:'name3',file:'file3', location:'location3', image:'images/img3.jpg', number:'(123) 400-0000'},
]">
  <!--There Are {{buildings.length}} restaurants-->
  <input type="search" ng-model="q" class="search-input" placeholder="Search..." />
  <br />
  <ons-list >
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="building in buildings | filter:q as results">

          <ons-row ng-click="myNavigator.pushPage('/' + {{building.file}} + '.html')">
            <ons-col width="95px">
              <img src="{{building.image}}" class="thumbnail">
            </ons-col>
            <ons-col>
              <div class="name">
                {{building.name}}
              </div>
              <div class="location">
                <i class="fa fa-map-marker"></i> {{building.location}}
              </div>
              <div class="desc">
                {{building.number}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
    </ons-list>
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
    <li class="animate-repeat" ng-if="results.length == 555">
      <strong>No results found...</strong>
    </li>
  </ul>

Upvotes: 0

Views: 349

Answers (2)

Patrick Klitzke
Patrick Klitzke

Reputation: 1559

I don't see the ons-navigator in your code. The easiest way in angular is to use a var for ons-navigator and then you can use myNavigator.pushPage('name')

<ons-navigator var="myNavigator"> 
  <ons-page>
    <ons-row ng-click="myNavigator.pushPage('file.html')" > My Row </ons-row>
  </ons-page>
</ons-navigator>
<ons-template id="file.html">
  <ons-page>
    My Content
  </ons-page>
</ons-template>

Upvotes: 0

Sumit Deshpande
Sumit Deshpande

Reputation: 2155

I don't have your exact code but i think u should not use expression within function call. I created sample demonstration for your app Demo. Please check on console by clicking on name. it logs correct url. Hope this helps!

 <div ng-click="pushPage('/' + building.file + '.html')">
      {{building.name}}
    </div>

Upvotes: 1

Related Questions