如何重新加载带有不同参数的div？ [英] How to reload a div with different parameters?

问题描述

我有一些标签。在每个选项卡的选择，一个特定的div应该得到与对应于每个标签和重装参数的特殊值进行初始化。如何能做到？

下面是标签：

 ＆LT; D​​IV NG控制器=visCtrl作为CTRL级=集装箱COL-SM-12＆GT;
    ＆LT; D​​IV CLASS =BS-例如＆GT;
        ＆LT; UL类=净值资产净值药丸＆GT;
            ＆LT;李纳克级={活跃：ctrl.isSet（1）}＆GT;＆LT; A HREF NG点击=ctrl.setTab（1）＆GT;犯罪＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;李纳克级={活跃：ctrl.isSet（2）}＆GT;＆LT; A HREF NG点击=ctrl.setTab（2）＆GT;事故＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV＆GT;
        ＆LT;！ - 我想$ scope.districts被改变，下面选择显示的对应选项 - ＆GT;
        区：LT;选择NG模型=selectedDistrictNG选项=项目在各区进行逐项|排序依据：'）的toString（'＆GT;＆LT; /选择＆GT;
        ＆LT;！ - 类似code了很多，这将是使用其他更新的参数 - ＆GT;
    ＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

解决方案

在你情况下，你应该使用 NG-路线这将是更合适使用，只需要更改导航栏的网址上的URL变化的基础，你需要加载与控制器，您在 $ routeProvider 已指定配置

模板

 ＆LT; D​​IV NG控制器=visCtrl作为CTRL级=集装箱COL-SM-12＆GT;
    ＆LT; D​​IV CLASS =BS-例如＆GT;
        ＆LT; UL类=净值资产净值药丸＆GT;
            ＆LT;李纳克级={活跃：ctrl.isSet（1）}＆GT;＆LT; A HREF NG点击=ctrl.setTab（1）NG-HREF =/标签/ 1＆GT;犯罪与LT ; / A＆GT;＆LT; /李＆GT;
            ＆LT;李纳克级={活跃：ctrl.isSet（2）}＆GT;＆LT; A HREF NG点击=ctrl.setTab（2）NG-HREF =/标签/ 2＆GT;意外＆LT ; / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;    ＆LT; NG-视图＆gt;＆LT; / NG-视图＆gt;
＆LT; / DIV＆GT;
 

Template.html

 ＆LT; D​​IV CLASS =模板容器＆GT;
        ＆LT;！ - 我想$ scope.districts被改变，下面选择显示的对应选项 - ＆GT;
        区：LT;选择NG模型=selectedDistrictNG选项=项目在各区进行逐项|排序依据：'）的toString（'＆GT;＆LT; /选择＆GT;
        ＆LT;！ - 类似code了很多，这将是使用其他更新的参数 - ＆GT;
    ＆LT; / DIV＆GT;
 

App.js

  VAR应用= angular.module（'应用'，['ngRoute']）;
  的app.config（['$ routeProvider'，
  功能（$ routeProvider）{
    $ routeProvider。
      当（'/标签/：身份证'，{
        templateUrl：template.html'，
        控制器：'templateController
      }）。
      除此以外（{
        redirectTo：'/标签/ 1'
      }）;
  }]）;
 

控制器

  app.controller（'templateController'，函数（$范围，$ routeParams）{
   //每一个标签变化将引起一次使用的路由提供商重新加载该控制器
   //这里你可以在$ routeParams.id标签号码
   $ scope.tabId = $ routeParams.id;
   //现在你有一个选项卡号码，你可以做到利用这个标签的ID在你进一步code执行   //..other code在这里..}）;
 

I have some tabs. On selection of each tab, a particular div should get initialized with some particular values of parameters corresponding to each tab and reload. How can it be done?

Here are the tabs:

<div ng-controller="visCtrl as ctrl" class="container col-sm-12"> 
    <div class="bs-example">
        <ul class="nav nav-pills">
            <li ng-class="{active:ctrl.isSet(1)}"><a href ng-click="ctrl.setTab(1)">Crime</a></li>
            <li ng-class="{active:ctrl.isSet(2)}"><a href ng-click="ctrl.setTab(2)">Accidents</a></li>
        </ul>
    </div>

    <div>
        <!-- i want the $scope.districts to be changed and the following select show the corresponding options -->
        District:<select ng-model="selectedDistrict" ng-options="item as item for item in districts | orderBy:'toString()' " ></select>
        <!-- A LOT OF SIMILAR CODE WHICH WILL BE USING OTHER UPDATED PARAMETERS -->
    </div>

</div>

解决方案

In you case you should use ng-route that would be more appropriate to use, Only you need to change your URL in navigation bar on basis of url change you need to load template with controller which you has specified in $routeProvider configuration

<div ng-controller="visCtrl as ctrl" class="container col-sm-12"> 
    <div class="bs-example">
        <ul class="nav nav-pills">
            <li ng-class="{active:ctrl.isSet(1)}"><a href ng-click="ctrl.setTab(1)" ng-href="/tab/1">Crime</a></li>
            <li ng-class="{active:ctrl.isSet(2)}"><a href ng-click="ctrl.setTab(2)" ng-href="/tab/2">Accidents</a></li>
        </ul>
    </div>

    <ng-view></ng-view>
</div>

Template.html

    <div class="template-container">
        <!-- i want the $scope.districts to be changed and the following select show the corresponding options -->
        District:<select ng-model="selectedDistrict" ng-options="item as item for item in districts | orderBy:'toString()' " ></select>
        <!-- A LOT OF SIMILAR CODE WHICH WILL BE USING OTHER UPDATED PARAMETERS -->
    </div>

App.js

  var app= angular.module('app', ['ngRoute']);
  app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/tab/:id', {
        templateUrl: 'template.html',
        controller: 'templateController'
      }).
      otherwise({
        redirectTo: '/tab/1'
      });
  }]);

Controller

app.controller('templateController', function($scope, $routeParams){
   //every time the tab change will cause reload this controller using route provider
   //here you can have tab number in $routeParams.id
   $scope.tabId = $routeParams.id;
   //now you have a tab number you can do use this tab id in your further code execution

   //..other code here..

});

这篇关于如何重新加载带有不同参数的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！