javascript - 如何在动态生成的 input-angularjs 中显示动态 Json 数据？

Question

我尝试在动态生成的输入 angularJS 中显示动态 JSON 数据。

{
"social": [
    {
        "id": "5694",
        "types": "4",
        "type": 4,
        "web": "https://www.xing.com",
        "title": "Xing"
    },
    {
        "id": "5695",
        "types": "7",
        "type": 7,
        "web": "https://www.blog.com",
        "title": "Blog"
    }
],
"webtypes": {
    "1": "LinkedIn",
    "2": "Website",
    "3": "Facebook",
    "4": "Xing",
    "5": "Twitter",
    "6": "Experteer",
    "7": "Blog",
    "8": "Skype",
    "9": "Windows",
    "10": "Google",
    "11": "Viadeo",
    "12": "Github",
    "13": "Youtube",
    "14": "CrunchBase",
    "15": "AngelList",
    "16": "Glassdoor"
},
"success": 1

尝试根据JSON数据生成输入框

<fieldset class="noborders" data-ng-repeat="social in socials">
      <select ng-model="socialselect[social.title]" ng-options="key as value for  (key , value) in webtypes">
      </select>
    <label class="item item-input">
        <input type="text" ng-model="socialinput[social.id]" ng-value="{{social.web}}" >
    </label>
</fieldset>

我无法使用“ng-model”获取数据。请帮助我。

Answer 1

像 this fiddle 中那样尝试并将 ng-value="{{ social.web }} " 更改为 ng-value="social.web" - AngularJS ng-value documentation .

<div ng-controller="MyCtrl">
  <fieldset class="noborders" data-ng-repeat="social in socials">
      <label class="item item-input">
          <input type="text" ng-model="social.web">
      </label>
  </fieldset>
  <button ng-click="submit()">
   Send form
  </button>
</div>

AngularJS Controller

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

myApp.controller('MyCtrl', function ($scope) {

   $scope.socials = [
      {
          "id": "5694",
          "types": "4",
          "web": "https://www.xing.com",
          "title": "Xing"
      },
      {
          "id": "5695",
          "types": "7",
          "web": "https://www.blog.com",
          "title": "Blog"
      }
  ];

  $scope.submit = function () {
      console.log($scope.socials);
  }
});