Question

在Angular，我正在为拥有不同房间的酒店构建一个网络应用程序。我希望能够单击导航栏中的选项卡（或页面上的任何位置。）并使用有关我存储在控制器中的房间的公共数据填充html视图。什么是最好的方法呢？我正在使用ui-routing。我还没有找到关于堆栈溢出的详尽答案。

以下是我的应用程序的示例。

这是我的app.js

var appBB = angular
.module('appBB', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', MainRouter]);

function MainRouter(states, router) {
    states
    .state( 'home', {
      url:'/',
      templateUrl: 'home.html'
  }).state( 'show',{
      url:'/show',
      templateUrl:'show.html'
  });
    router.otherwise('/');
}

这是我的控制器

appBB.controller("BBController", BBController());

function BBController() {
    var self = this;

    self.apartments = [
        {
        name: "apt1",
        image: "imag1.jpg"
        amenities: ["blablabal", "bhuhuih", "hvjf"]
        },

        {
        name: "apt2",
        image: "img2.jpg",
        amenities: ["blablabla", "bkjhkg", "lkhug"]
        },

        {
        name: "apt3",
        image: "img3.jpg",
        amenities: ["blablabla", "jgfkhgc","jgvkhg"]
        }
    ]
}

这是我要填写的视图模板的示例：

<div ng-controller="BBController as bbs">

    <div>
         <h4>{{this should show the apt name}}</h4>
    </div>
    <div class="row">
         <div class="col-sm-8">
               <img ng-src="{{this should show the image of the apt that i  clicked on}}" />                     
         </div>
         <div class="col-sm-4">
             <ul>
               <li ng-repeat="looping over the apt amenities">{{amenity}}</li>              </ul>
         </div>          
    </div>
</div>

非常感谢任何帮助。

Answer 1

也许，您可以在/ show / apt1这样的网址上添加信息，并使用apt1查找控制器上的信息。

编辑：

一点解释：https://docs.angularjs.org/tutorial/step_07

Answer 2

你在做什么看起来不错，但你需要一些改进。我建议你在导航栏点击上使用$routeParams。类似的东西：

<div ng-controller="BBController as bbs">

<div>
     <h4>{{this should show the apt name}}</h4>
</div>
<div class="row">
     <div class="col-sm-8">
           <img ng-src="{{this should show the image of the apt that i  clicked on}}" />                     
     </div>
     <div class="col-sm-4">
         <ul>
           <li ng-repeat="amemity in amenities">
            <a ng-href="#amemityList/{{ amemity.id }}"> {{amemity.name}} </a>
           </li> 
         </ul>
     </div>          
</div>

现在，您可以使用此amenity.id传递给YourController并相应地获取相应的视图，其中包含所有信息＆＃34;点击＆＃34; amenity.id

.when('/amemityList/:navBar', {
            templateUrl: "AmenityView.html",
            controller: "YourController"
        })

通过这种方式，您可以使用单一视图AmenityView.html，其信息可以按照amenity.id传递给控制器，如

var navBarSelection_id = $routeParams.navBar;

使用我的控制器中的数据编译html模板

2 个答案: