Angular ng-click onsen

时间:2016-02-08 03:08:01

标签: angularjs onsen-ui angularjs-ng-click

所以我对编码很新,我似乎无法弄清楚我遇到的一些问题。

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

所以我开始了,{{building.file}}没有进入网址。有人可以帮助我或解释为什么它不工作?这是我的完整代码

    <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>

2 个答案:

答案 0 :(得分:1)

我没有你的确切代码,但我认为你不应该在函数调用中使用表达式。我为您的应用Demo创建了示例演示。请点击名称查看控制台。它记录正确的网址。希望这有帮助!

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

答案 1 :(得分:0)

我在代码中没有看到ons-navigator。角度最简单的方法是使用ons-navigator的var然后你可以使用myNavigator.pushPage(&#39; name&#39;)

<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>