Question

我有一个对象的json文件，用于存储要在指令中使用的属性。我想在指令中使用json obj模型值，但我正在尝试的任何工作都没有。

任何人都有任何想法，我做错了什么/失踪？我觉得这很混乱。希望有人可以帮助你好几天尝试！

修改:: 我有一个获取并返回Json对象的$ http服务，我可以正常访问这些属性。

我特意尝试使用json obj模型属性的值 - “model”：“ticketData.contactname”作为ng-model的动态值。

如果我只使用ticketData.contactname obj那么它工作正常我可以编辑模型值，但如果我尝试使用Json obj中的字符串，那么它只是将字符串打印到输入框中。

我不知道该怎么办。我确信这是我缺少的基本内容。

提前致谢

Json样本：

[
    {
        "inputsContact" : [
            { 
                "labelName" : "Contact Name",
                "placeholder" : "Enter your name",
                "model" : "ticketData.contactname",
                "type" : "text"
            }
    }
]

Html示例：

<text-input-comp inputdata="contactName" ng-model="contactModel">    </text-input-comp>

指令text-input-comp：

.directive('textInputComp', [ '$compile', function($compile){
  return {
    restrict: 'E',
    scope: {
      inputData: '=inputdata',
      modelData: '=ngModel'
    },
    templateUrl: '/app/views/partials/components/textInputComp.html'
  }
}]);

指令模板示例：

<label> {{ inputData.labelName }} </label> 
<input type="text" ng-model="modelData" ng-model-options="{ getterSetter: true }" placeholder="{{ inputData.placeholder }}"  /> 
<div ></div>

控制器示例：

$scope.contactName = $scope.inputData[0].inputsContact[0];
$scope.contactModel = $scope.inputData[0].inputsContact[0].model;

Answer 1

我认为你需要首先获取json文件然后执行所有的manupilation

看一下这段代码

＆＃13;

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.json").then(function (response) {
      $scope.myData = response.data.records;
  });
});
</script>

</body>
</html>

＆＃13;

你缺少的是这个只需用你的json替换customer.json文件，你就可以了和

1. $ http是负责与其他文件通信的服务。 $ http表示从'js / data.json'获取文件，如果操作是'成功'，则执行一个函数，保存从data.json文件自动获取的'data' 让你明白。

2.上面还有一行：['$ scope'，'$ http'，函数（$ scope，$ http）{...}]有点棘手：它需要一个包含两个对象的数组，一个是$ scope和其他是服务，即$ http。我们在数组中有这个的原因是angularJS自动缩小代码，这意味着它删除了额外的空间并缩短了变量名称以获得更快的性能，但有时这种缩小会带来麻烦所以我们只是告诉控制器不要缩小$ scope，$ http服务和数组内的函数。

来自json对象的angularjs动态模型

1 个答案: