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

时间:2017-02-21 12:30:04

标签: javascript angularjs json ionic-framework

我尝试在动态生成的输入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>

我无法使用&#34; ng-model&#34;来获取数据。请帮帮我。

1 个答案:

答案 0 :(得分:2)

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控制器

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);
  }
});