Question

现在我正在使用AngularJS在网络界面上工作，该界面应该具有类似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 : []
}

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

谢谢。

Answer 1

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

与使用AngularJS的Dev HTTP Client类似的功能

1 个答案: