Question

我是角度编程的初学者，我正在寻找一些关于如何使用这种语言与对象文字进行交互的示例。不幸的是，我没有找到任何可以回答我关于这个主题的问题的例子。所以，如果我有这个HTML文件：

＆＃13;

<body ng-app="watch">
  

<div ng-controller="reely">
      <form>
        Name:	
        <input type="text" ng-model="place.name"  ng-change='change()'>
        <br/>
        StreetAdress:	
        <input type="text" ng-model="place.streetAdress"  ng-change='change()'>
        <br/>
        AddressLocality : 
        <input type="text" ng-model="place.addressLocality"  ng-change='change()'>
        <br/>
        AddressRegion:
        <input type="text" ng-model="place.addressRegion"  ng-change='change()'>
        <br/>
        postalCode :
        <input type="text" ng-model="place.postalCode"  ng-change='change()'>
        <br/>
        AddressCountry:
        <input type="text" ng-model="place.addressCountry"  ng-change='change()'>
        <br/>
		 Logo:	<input type="text" ng-model="place.logo"  ng-change='change()'><br/>
	  Url: <input type="text" ng-model="place.url"  ng-change='change()'><br/>
	  Image:<input type="text" ng-model="place.image"  ng-change='change()'><br/>
      </form>
	  <h1>
        Your JSON
      </h1>
      <p>
        {{mtl}} 
      </p>
    </div>
	
		
  </body>

＆＃13;

如果用户输入不同形式的内容，数据将自动添加到对象文字中，例如：

＆＃13;

{
  "@context": {
    "schema": "http://schema.org/"
  },
  "@graph": [
    {
      "@id": "place",
      "@type": "schema:Person",
      "schema:name": " office",
      "schema:address": {
        "@type": "schema.PostalAddress",
        "streetAdress": "501 rue William",
        "addressLocality": "Toronto",
        "addressRegion": "ON",
        "postalCode": "H3C 1P4",
        "addressCountry": "CA"
      }
      "schema:logo": "http://active.com/images/logo.png",
      "schema:url": "http://shop.active.com/products/ra-r436",
      "schema:image": "http://active.com/images/ra-r4xx.jpg"
    }
  }
}

＆＃13;

请注意，数据应该显示在文字对象内的不同位置。我知道我的帖子不是很清楚，希望我能在可能的情况下获得演示

这是我的控制器代码：

＆＃13;

angular.module("watch", [])

.controller("reely", function($scope) {
    $scope.mtl = {
  "@context": {
    "schema": "http://schema.org/"
  },
  "@graph": [
    {
      "@id": "place",
      "@type": "schema:Place",
     
      "schema:address": {
        "@type": "schema.PostalAddress"
       }
    }
  ]
}


    $scope.place = {};
	$scope.adress= {};
	
	$scope.adress["@type"]=  "schema.PostalAddress";
	
   
	    function changeKeyValue() {

        for (var key in $scope.place) {
            if ($scope.place.hasOwnProperty(key)) {
                $scope.mtl["@graph"][0]["schema:address"]["schema:" + key] = $scope.place[key];
         
			}
        }
    }

    $scope.change = function () {
        changeKeyValue();
    }
});

＆＃13;

Answer 1

实际上你可以毫不费力地做到这一点:)你可以使用这样的另一种表示法：

var obj={
    "@graph":[{
         "@type":"anyValueHere"
     }]
};

您可以覆盖以下值： OBJ [＆＃39; @图表＆＃39;] [0] [＆＃39;的StreetAddress＆＃39;] =＆＃34;多伦多＆＃34 ;;

结果，您将获得这个新的json对象：

{
    "@graph":[{
         "@type":"anyValueHere",
         "streetAddress":"Toronto"
    }]
}

所以基于这种表示法，你可以这样做：

这是你的HTML：

<div ng-controller="reely">
        <form>
            Name:
            <input type="text" ng-model="mtl['@graph'][0]['schema:name']" >
            <br/>
            StreetAdress:
            <input type="text" ng-model="mtl['@graph'][0]['schema:address'].streetAdress" >
            <br/>
            AddressLocality :
            <input type="text" ng-model="mtl['@graph'][0]['schema:address'].addressLocality" >
            <br/>
            AddressRegion:
            <input type="text" ng-model="mtl['@graph'][0]['schema:address'].addressRegion" >
            <br/>
            postalCode :
            <input type="text" ng-model="mtl['@graph'][0]['schema:address'].postalCode" >
            <br/>
            AddressCountry:
            <input type="text" ng-model="mtl['@graph'][0]['schema:address'].addressCountry" >
            <br/>
             Logo:  <input type="text" ng-model="mtl['@graph'][0]['schema:logo']" ><br/>
          Url: <input type="text" ng-model="mtl['@graph'][0]['schema:url']" ><br/>
          Image:<input type="text" ng-model="mtl['@graph'][0]['schema:image']" ><br/>
          </form>
          <h1>
            Your JSON
          </h1>
          <p>
            {{mtl}}
          </p>
    </div>

这将是您修改过的控制器：

angular.module("watch", [])
.controller("reely", function($scope) {
    $scope.mtl = {
      "@context": {
         "schema": "http://schema.org/"
      },
      "@graph": [
        {
          "@id": "place",
          "@type": "schema:Place",
           "schema:address": {
            "@type": "schema.PostalAddress"
           }
        }
      ]
    };
})

正如您所看到的，您使用＆＃34; mtl＆＃34;直接来自html的对象，只需使用对象[＆＃34; property＆＃34;]表示法。

所以我希望它有所帮助，如果确实如此，你可以标记为正确答案：D

如何使用角度

1 个答案: