Question

我正在尝试通过单击所选项目并在不同的div中呈现来生成ng-repeat中生成的列表中的单个项目。这些是文件。 http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properities -->
    <title>Homepage Example - Semantic</title>

    <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
    <link rel="stylesheet" type="text/css" href="homepage.css">

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <script src="../dist/semantic.js"></script>
    <script src="homepage.js"></script>
    <script src="app.js"></script>

  </head>
<body id="homebased" ng-controller="MyController">
  <div class="ui two divided column padded grid">
    <div class="six wide column">

      <h2>Six Wide Column</h2>
      <form action="ui form">
        <div class="two fields">
          <div class="field">
            <div class="ui action left icon input">
              <i class="search icon"></i>
              <input type="text" placeholder="Start typing..." ng-model="q">
              <div class="ui teal button">
                <i class="large arrow right icon"></i></div>
            </div>
          </div>
<div class="ui hidden divider"></div>
          <div class="field">
           <label>Filter by..</label>
            <div class="ui selection dropdown small">
 <input type="hidden" name="name">
              <div class="default text">filter</div>
              <i class="dropdown icon"></i>
              <div class="menu">
                <div class="item" data-value="name">Author</div>
                <div class="item" data-value="year">Year</div>
              </div>
            </div>
            <div name="stp">{{records.indexOf(item)}}</div>
        </div>
    </form>
</div>
</div>
    <div class="ten wide column">
    <h2>Search Results</h2>
<div class="ui segment right">
        <a class="ui teal left ribbon label">N= {{records.length}}</a>
        <div class="ui selection list">
          <div class="item" ng-repeat="item in records | filter: q">
            <a href="#stp {{records.indexOf(item)}}"><div class="content" >
                <div class="header">{{item.name}}</div>
                <div class="description">Correspondence begun in: {{item.start}}</div>
              </div></a>
            </div>
        </div>
      </div> <!--list-->
</div>
  </div>
</body>
</html>

APP.JS 

    var myApp = angular.module('myApp', ['firebase']);

    myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {

        var ref = new Firebase('https://simpleform.firebaseio.com/records');
        $scope.records = $firebaseArray(ref);
        $scope.recordOrder = 'name';
    }]);

Answer 1

我建议你去挖掘ui-router：https://github.com/angular-ui/ui-router

您可以定义视图，定义路由，然后使用ui-sref =“myitem（{id：item.id}）”将项目访问其他视图，并且您已完成设置！

在ng-repeat呈现列表中显示单个项目

1 个答案: