Question

我还是一个还在学习angularJS的新手。有人可以帮我吗？我的任务是创建动态表单，其中数据来自JSON对象并预先填充字段，我们也应该能够添加和删除表单。我附上了一个示例输出图像 - What I expect it to look like

我试图做的事 - http://plnkr.co/edit/P8R20LkV5mh8ipqNIsr9?p=info

我哪里错了？我需要做出哪些改变？

var mockDataForThisTest = "json=" + encodeURI(
  JSON.stringify([{
    name: "Dave",
    email: "dave@gmail.com",
    option: "Home",
    number: "1234567890"
  }, {
    name: "John",
    email: "jon@gmail.com",
    option: "Home",
    number: "1234567890"
  }]));

var app = angular.module('angularApp', []);

app.controller('MainCtrl', function($scope, $http) {

  $scope.choices = [];
  $scope.loadChoices = function() {
    var httpRequest = $http({
      method: 'POST',
      url: './json/',
      data: mockDataForThisTest

    }).success(function(data, status) {
      $scope.choices = data;
    });
  };

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length + 1;
    $scope.choices.push({
      'id': 'choice' + newItemNo
    });
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length - 1;
    $scope.choices.splice(lastItem);
  };

});

fieldset {
  background: #FCFCFC;
  padding: 16px;
  border: 1px solid #D5D5D5;
}
.addfields {
  margin: 10px 0;
}
#choicesDisplay {
  padding: 10px;
  background: rgb(227, 250, 227);
  border: 1px solid rgb(171, 239, 171);
  color: rgb(9, 56, 9);
}
.remove {
  background: #C76868;
  color: #FFF;
  font-weight: bold;
  font-size: 21px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 4px 9px;
  vertical-align: top;
  line-height: 100%;
}
input[type="text"],
select {
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="app.js"></script>

</head>

<body>
  <div ng-app="angularApp" ng-controller="MainCtrl">
    <fieldset data-ng-repeat="choice in choices">
      <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
      <input type="text" ng-model="choice.email" name="" placeholder="Enter email">

      <input type="text" ng-model="choice.number" name="" placeholder="Enter mobile number">
      <select ng-model="choice.option">
        <option value>Select</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
      </select>
      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
    </fieldset>
    <button class="addfields" ng-click="addNewChoice()">Add fields</button>

    <div id="choicesDisplay">
      {{ choices }}
    </div>
  </div>
</body>

</html>

Answer 1

您的plunkr无法正常工作，因为在将app.js重新命名为index.html后，您的脚本标记指向script.js中不存在的app.js工作

你的JSON模拟看起来有点复杂。您可以轻松地将一个json文件添加到plunkr并使用$http.get()请求加载它。

请查看下面的演示以及此updated plunkr。

＆＃13;

// Code goes here

/*
var mockDataForThisTest = "json=" + encodeURI(
    JSON.stringify([
    {
        name: "Dave",
        email: "dave@gmail.com",
        option: "Home",
        number: "1234567890"
    },
    {
        name: "John",
        email: "jon@gmail.com",
        option: "Home",
        number: "1234567890"
    }
]));*/

var app = angular.module('angularApp', []);

app.controller('MainCtrl', function($scope, $http) {

    $scope.choices = [];
    
    loadChoices();
    
    function loadChoices() {
        var httpRequest = $http({
            method: 'GET',
            url: 'https://www.mocky.io/v2/5758817a130000f82d896c76'
            //url: './example.json'
            //data: mockDataForThisTest

        }).then(function(response) { //success(function(data, status) {
            // use then --> newer syntax
            console.log(response.data);
            $scope.choices = response.data;
        });
    };

    $scope.addNewChoice = function() {
        var newItemNo = $scope.choices.length + 1;
        $scope.choices.push({
            'id': 'choice' + newItemNo
        });
    };

    $scope.removeChoice = function(index) {
        //var lastItem = $scope.choices.length - 1;
        $scope.choices.splice(index, 1); //lastItem);
    };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="angularApp" ng-controller="MainCtrl">
        <fieldset data-ng-repeat="choice in choices">
            <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
            <input type="text" ng-model="choice.email" name="" placeholder="Enter email">
            
            <input type="text" ng-model="choice.number" name="" placeholder="Enter mobile number">
            <select ng-model="choice.option">
                <option value>Select</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Home">Home</option>
            </select>
            <button class="remove" ng-click="removeChoice($index)">-</button>
        </fieldset>
        <button class="addfields" ng-click="addNewChoice()">Add fields</button>

        <div id="choicesDisplay">
            {{ choices }}
        </div>
    </div>

＆＃13;

动态表单呈现和从JSON对象填充表单？

1 个答案: