我正在尝试使用AngularJS发布数据

时间:2016-02-17 04:47:30

标签: javascript angularjs laravel laravel-5.2

Our problem with angular and backend

嗨,谢谢你阅读本文,我再次出现角度问题...问题是如此复杂,我在谷歌搜索,也在这个论坛,但直到现在没有答案解决我的问题,所以这里是问题。

我正在运行localhost,我们的目标是在用户点击“tambahkan”时制作(如果你可以看到上面的图片),那么黄色按钮“lanjutkan”上方的空白字段会出现用户列表中的内容“tambahkan”通过绿色按钮(我希望每个人都了解流程)

问题是,不知怎的,我对如何从项目列表中定义数据感到困惑,所以我可以将它扔进“lanjutkan”上方的字段,任何人都可以帮助我吗?

以下是代码:

Index.html(仅限字段,代码太长,我认为不需要在这里显示所有这些代码)

<div class="container-customscroll">
                                    <div class="content mCustomScrollbar">
                                        <div class="itemcheck" ng-repeat="item in dataItem.stores | regex:'name':alfabet | orderBy: 'name' | filter: searchItem">
                                            <div class="left" ng-if="item.preparation == ''" ng-model="name"><i class="fa fa-circle silver"></i>{{item.name}}</div>
                      <div class="left" ng-if="item.preparation == '1'" ng-model="name"><i class="fa fa-circle green"></i>{{item.name}}</div>
                      <div class="left" ng-if="item.preparation == '2'" ng-model="name"><i class="fa fa-circle yellow"></i>{{item.name}}</div>
                      <div class="left" ng-if="item.preparation == '3'" ng-model="name"><i class="fa fa-circle pink"></i>{{item.name}}</div>
                                            <div class="right" ng-click="addToCart()"><a>+ Tambahkan</a> </div>
                                        </div>
                                    </div><!-- /mCustomScrollbar -->
                                </div><!-- /container-customscroll -->

<div class="col-md-4">
                <div class="container-sidebaryellow">
                    <div class="title">Pemeriksaan Ditambahkan</div>
                    <div class="container-customscroll">
                        <div class="content mCustomScrollbar">
                            <div class="item-tambahan ">
                                <div class="item checkuptambahan" ng-repeat="cart in tambahCart">
                                    <i class="fa fa-circle pink">{{cart.name}}</i>
                                    <a class="checkuptambahan">x</a>
                                </div>
                            </div>
                        </div><!-- /content -->
                    </div><!-- /container-customscroll -->
                    <a href="#" class="btn btnyellow">Lanjutkan</a>
                </div>
            </div>

这里是角度代码:

var app = angular.module('pesanlab', []);
app.controller('pesanlabCtrl', function($scope,$http){
    //variabel awal
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = !$scope.showMe;
    }


    $scope.aksi = "tambah";

    //code untuk mengeluarkan data dari data/item.json
    $scope.dapatkanItem = function(){
    $http.get('/someurl').success(function(data){
      $scope.dataItem = data;
    });
    }

    $scope.dapatkanItem();

    $scope.dapatkanPanel = function(){
    $http.get('/someurl').success(function(data){
      $scope.dataPanel = data;
    });
    }

    $scope.dapatkanPanel();

    $scope.dapatkanPaket = function(){
        $http.get('/someurl').success(function(data){
           $scope.dataPaket = data;
        });
    }

    $scope.dapatkanPaket();

    $scope.addToCart = function(){
        $http({
          method: 'POST',
          url: '/someurl',
          headers: {
            "Access-Control-Allow-Origin" : "*",
            "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With"
          },
          data: {
          //  master_code: $scope.name,
            name: $scope.item
          }
        }).success(function(data, status, headers, config){
          $scope.tambahkan = data;
        });
        console.log($scope.item)
    }

    $scope.tambahkanCart = function(){
        $http.get('/someurl').success(function(data, status, headers, config){
           $scope.tambahCart = data;
        });
    }

    $scope.tambahkanCart();
    });

    app.filter('regex', function() {
          return function(input, field, regex) {
              var patt = new RegExp(regex);
              var out = [];

              if(input === undefined){
                  return out;
              }
              for (var i = 0; i < input.length; i++){
                  if(patt.test(input[i][field]))
                      out.push(input[i]);
              }
            return out;
          };
    });

当console.log运行时,它返回“未定义”,我们也在网站上使用api(我不知道它叫什么),它返回这样,我们使用laravel 5.2 for后端

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://dev.pesanlab.com/api/v1/order/cart/add. (Reason: missing token 'access-control-allow-headers' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

任何人都可以帮助我吗?非常感谢你

@ravi,这是代码,我认为评论不是代码的地方:

$scope.tambahItem = function(){
      $scope.data = $scope.dataItem.stores;
      $scope.temp = angular.fromJson($scope.data);
      alert($scope.temp.name);
};

并且此代码返回“undefined”,您知道如何解决此问题吗?如果我从Json获取数据,它也返回对象

1 个答案:

答案 0 :(得分:0)

应在接受请求的服务器上启用CORS。你的服务器应该说我可以接受来自未知/跨域的api请求。

我建议你检查一下。

顺便说一句,如果您可以一般性地表达您的问题,则无需附加图片,因为这可能违反了您可能正在处理的组织的版权政策。