简体   繁体   中英

$http PUT call angularJS

I am trying to make put call in angular js after selecting value from dropdown selection. I already got value from selection. Just want too make put call but not able to make response.

Here is HTML

<!DOCTYPE html>
<html ng-app="myApp">

    <head>
        <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.js"></script>
        <script data-require="jquery@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

    <body ng-controller="sensorsCtrl">
        <span class="sensors actionable u-mv" id="myid" ng-     click="addSequenceLink()">  
            Add Sequence Link
        </span>
        <div ng-show="innerIsIsLoading" style="position: fixed; z-index: 999999; top: 450px; left: 65%">
            <px-spinner size="50"></px-spinner>
        </div>
        <div>
            <select ng-model="asset1" id="assetNameGroup" ng-change="changedValue(asset1)" ng-options="x.name for x in Nameitems track by x.uri">
                <option>Select Name</option>
            </select>

            <select ng-model="asset2" id="assetNameGroup2" ng-change="sectionChangedValue(asset2)" ng-options="x.name for x in asset1.sections">
                <option value="">Select Name</option>
            </select>
            <select ng-model="asset3" id="assetNameGroup3" ng-change="positionChangedValue(asset3)" ng-options=" x.sensorPositionName for x in asset2.ultrasonicSensorPositions">
                <option value="">Select Name</option>
            </select>

            {{positionItem}}
        </div>
    </body>
</html>

javascript

console.clear();

var app = angular.module("myApp", []);

app.controller('sensorsCtrl', function($scope, $window, $timeout, $http{
    $scope.innerIsIsLoading = true;

    $http.get('sample.json').success(function(resp) {
        $scope.innerIsIsLoading = false;
        $scope.assetData = resp;
        $scope.Nameitems = [];

        var testobj = $scope.assetData[0].name;

        angular.forEach($scope.assetData, function(val, key) {
            $scope.Nameitems.push({
                "name": val.name,
                "uri": val.uri,
                "sections": val.sections
            });
        });
    });

    $scope.itemList= []; 
    $scope.sectionItem = [];
    $scope.positionItem = [];

    $scope.changedValue = function(item){
        $scope.itemList.push(item.sections);
    } 

    $scope.sectionChangedValue = function(item){
        $scope.sectionItem.push(item.ultrasonicSensorPositions)
    }

    $scope.positionChangedValue = function(item){
        $scope.positionItem.push(item)
    }

    $scope.onclick= function(currentUlSensor){
        var req = {
            method: 'PUT',
            url: xyz,
            headers: {
                'Content-Type': 'application/json'
            },
            data: $scope.positionItem;
        }

        $http(req).success(function (response) {
            $scope.isLoading = false;
            $scope.xyz= response;
        });
    }
});

Data should be from last drop down section data make put call and request data is like this

   [
   {
     "ultrasonicSensorPositionId": 18,
     "sensorPositionName": "ultrasonic sensor position 1",
     "diameter": 22.5,
    "rotation": 90,
     "sequenceNumber": 1,
     "sectionId": "/assets/332008d3-fddc-391b-9cc1-6a41f7ff73d1"
  },
  {
    "ultrasonicSensorPositionId": 19,
    "sensorPositionName": "ultrasonic sensor position 2”,
     "diameter": 22.5,
    "rotation": 90,
    "sequenceNumber": 2,
    "sectionId": "/assets/332008d3-fddc-391b-9cc1-6a41f7ff73d1"
  }
  ]

here is plunker demo .

Your request seems to be OK - just remove the ; from data: $scope.positionItem; . I usually use:

$http({
    url: xyz,
    method: 'PUT',
    contentType: 'application/json; charset=utf-8',
    data: $scope.positionItem
}).then(function (result) { // this is the success
    ...
}, function (error) {  // this is the error
    ....
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM