与使用AngularJS的Dev HTTP客户端功能类似

Similar functionality as in Dev HTTP Client using AngularJS

本文关键字：客户端 功能 HTTP Dev AngularJS      更新时间：2023-09-26

现在我正在与AngularJS工作在一个web界面，应该有类似的行为，如开发HTTP客户端。我找不到一种方法如何像DHC那样添加标题。

我试图使它像这样，但它不工作，因为数组初始化为空:

<div ng-repeat="header in headersCollection.headers">
    <input ng-model="header.name" type="text"/> : 
    <input ng-model="header.value" type="text"/>
</div>
<button type="button" ng-click="addNewHeader()">Add</button>

header应该存储在这个对象中，并且可以通过web界面创建、编辑和删除。

$rootScope.headersCollection = {
            headers : []
}

任何想法/链接/答案都非常感谢并立即回答。

谢谢。

在header集合中创建一个"空" header对象。参见http://jsfiddle.net/e8MEx/当然，在添加另一个和可能添加删除项的功能之前，您将需要添加一些验证以确保它们是值:

JavaScript: 

var mod = angular.module("myApp", []);
mod.run(["$rootScope", function($rootScope) {
    //start the array with one empty value for header
    $rootScope.headersCollection = {
        headers : [{name: "", value: ""}]
    }
}]);
mod.controller("MainController", ["$scope", "$rootScope", function ($scope, $rootScope) {
    $scope.headersCollection = $rootScope.headersCollection
    $scope.addNewHeader = function () {
        //push a new empty value onto the array.
        $scope.headersCollection.headers.push({name: "", value: ""});
    }
}]);
HTML: 

<div ng-app="myApp" ng-controller="MainController">
    <div ng-repeat="header in headersCollection.headers">
        <input ng-model="header.name" type="text"/> : 
        <input ng-model="header.value" type="text"/>
    </div>
    <button type="button" ng-click="addNewHeader()">Add</button>
    <p>{{headersCollection.headers}}</p>
</div>
相关文章：