Fatal编程技术网
  • javascript/
  • Javascript 根据JS中的ID将数据从一页发送到另一页

Javascript 根据JS中的ID将数据从一页发送到另一页

javascript jquery angularjs ajax

Javascript 根据JS中的ID将数据从一页发送到另一页,javascript,jquery,angularjs,ajax,mobile-angular-ui,Javascript,Jquery,Angularjs,Ajax,Mobile Angular Ui,我使用的是MobileAngularJSUI框架。我是angular js的新手，希望将数据从一个页面发送到另一个带有城市id的页面。如果用户单击城市，则根据城市显示数据 主页： HTML页面： <div class="jumbtron scrollable-content text-center bg-color"> <div class="row"> <div class="bgImage"> <div c

我使用的是MobileAngularJSUI框架。我是angular js的新手，希望将数据从一个页面发送到另一个带有城市id的页面。如果用户单击城市，则根据城市显示数据

主页：

HTML页面：

  <div class="jumbtron scrollable-content text-center bg-color">
   <div class="row">
      <div class="bgImage">  
        <div class="bannerCntnt">
           <div class="hp-text-bnnr" style="color:white"> WHERE DO YOU WANT DELIVERY? <br>CHOOSE CITY </div> <br>
              <div class="btn-group"  ng-controller="MyController"> 
                  <button ui-turn-on='myDropdown' class='btn' ng-click="getDataFromServer()"
                    style="width:160px;background-color:white; color:#c62222">
                    <span class="fa fa-location-arrow"></span>
                    <strong>
                       Select City
                    </strong>
                  </button>
                  <ul class="dropdown-menu scrollableMenu" role="menu" ui-outer-click="Ui.turnOff('myDropdown')" ui-outer-click-if="Ui.active('myDropdown')" role="menu"
                  ui-show="myDropdown" ui-state="myDropdown" ui-turn-off="myDropdown" style="margin-top:0 px;margin-top:-1px; text-align:center;height:300px;  overflow: scroll;">  
                       <li ng-repeat="city in cities">
                         <a ng-href="#/cityPage"  style="color:#763428; font-weight:bold;">{{ city.cityName }}</a>
                      </li>

                  </ul>
              </div>
        </div>
      </div>
    </div>
</div>
当用户从下拉列表中点击任何选择城市时，所有城市id都会出现在控制台中。点击下拉列表城市后，下一页将出现

屏幕截图：

HTML代码：

<div class="jumbtron scrollable-content text-center bg-color">
   <div class="row">
          <div class="bgImage">  
          </div>
          <div class="btn-group img-responsive"  ng-controller="MyControllerCity"> 
              <div ng-repeat="prdct in cityProduct">
                   <a  href="#/category-prduct" style="color:#763428; font-weight:bold;">
                      <img  src="{{prdct.categoryImage}}">
                    </a>
              </div>
          </div>

    </div>
</div>
您可以通过此URL查看哪个城市有多少产品：

> https://www.winni.in/app/city-home/12
> https://www.winni.in/app/city-home/1
> https://www.winni.in/app/city-home/2

APP.JS

angular.module('Y', [
  'ngRoute',
  'mobile-angular-ui',
  'Y.controllers.Main'
])

.config(function($routeProvider) {
  $routeProvider.when('/', {templateUrl:'home.html',  reloadOnSearch: false})
                .when('/cityPage', {templateUrl:'cityPage.html',  reloadOnSearch: false})
                .when('/category-prduct', {templateUrl:'category-prduct.html',  reloadOnSearch: false})
                .when('/product-description', {templateUrl:'product-description.html',  reloadOnSearch: false})
                .when('/my-winni', {templateUrl:'my-winni.html',  reloadOnSearch: false})
                .when('/gift-box', {templateUrl:'gift-box.html',  reloadOnSearch: false});
});
我想根据城市ID在下一页显示数据

我们可以从这个url找到城市ID 并在此url上附加：

您已经在路由文件中使用了routeParam，就像我在下面的代码中所做的一样。并且必须通过$routeParam在其他控制器中传递参数。希望这个例子对你有所帮助

index.html
您可以像这样通过路由传递查询字符串参数

$location.path('/YourView/').search({ city: $scope.selectedcity });
然后像这样访问视图上的routeparameter

 console.log('selected brand ' + $routeParams.brand);
注意

只要您正确设置了路线，这将正常工作。

当我点击城市名称时，您需要传递id，对吗？@Paresh Gami。是的，我想传递id并将此城市id附加到下一个控制器url中。（）winni.in/app/city-home/12。12是一个城市id，如果城市id是4，那么它应该附加这个id，修改后的url是winni.in/app/city home/4。我正在使用移动anguler ui框架。我很困惑。你能给我解释一下吗。因为我在使用视图（HTML）之后，控制转到App.js和App.js打开新页面。我从JSON获取数据。当然。如果你不介意的话。我想用你的邮件id发送我的代码。这是我的json url。。我只想在ajax成功部分获得id。 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body>

<div ng-view></div>

<script>
var app = angular.module('myApp', []);
app.config(['$routeProvider',
        function($routeProvider) 
        {
            $routeProvider.
                when('/city', 
                {
                    templateUrl: 'city.html',
                    controller: 'cityController'
                }).
                when('/city/:city_id', 
                {
                    templateUrl: 'city_id.html',
                    controller: 'CityIdController'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }]);


app.controller('cityController', function($scope) 
{
    $scope.city_data = [
                    {id:1,
                    name:'Rajkot'},
                    {id:2,
                    name:'Morbi'}
                    ];
});

app.controller('CityIdController', function($scope,$routeParams) 
{
    console.log($routeParams.city_id);
    $scope.city_id = $routeParams.city_id;
});
</script>
</body>
</html>

<div ng-repeat="x in city_data">
    <a href="#/city/{{x.id}}">{{x.name}}</a>
</div>

Clicked City Id is : {{city_id}}

$location.path('/YourView/').search({ city: $scope.selectedcity });

 console.log('selected brand ' + $routeParams.brand);