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

【问题标题】：Similar functionality as in Dev HTTP Client using AngularJS与使用 AngularJS 的 Dev HTTP 客户端类似的功能
【发布时间】：2014-03-21 13:31:29
【问题描述】：

现在我正在使用 AngularJS 的 Web 界面，它应该具有类似 Dev HTTP Client 的行为。我找不到像 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>

标题应存储在此对象中，并可通过 Web 界面进行创建、编辑和删除。就像在 DHC 中一样。

$rootScope.headersCollection = {
            headers : []
}

任何想法/链接/答案都受到高度赞赏并立即回答。

谢谢。

【问题讨论】：

标签： javascript html angularjs http-headers

【解决方案1】：

只需在标头集合中创建一个“空”标头对象。见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>

【讨论】：

我刚刚想出了类似的解决方案 :) 谢谢您的回复。