Как динамически привязать данные Json к редактору ACE

Я создал приложение на основе AngularJS, в которое встроен редактор Ace с помощью директивы UI.Ace для Джсон. Приложение создаст набор редакторов на основе динамических данных Json, т.е. каждый редактор имеет ng-модель, содержащую объект Json. Вот модель:

<div ng-repeat="item in items">
    <div ui-ace="aceOptions" ng-model="item" style="height: 200px"></div>
</div>

Однако редактор Ace требует строковых данных Json и выдает следующую ошибку:

"Ошибка: ui-ace не может использовать объект или массив в качестве модели

С другой стороны, если я сначала упорядочу данные, то как я могу понять это с помощью ng-repeat? Итак, как можно решить эту проблему? Любая помощь будет оценена по достоинству.

Пример:

[
    {                           // goes to editor one
        "id": "14",
        "firstName": "John",
        "lastName": "Doe"
    },
    {                           // goes to editor two
        "id": "45",
        "firstName": "Bob",
        "lastName": "Smith"
    },
    {                           // goes to editor three
        "id": "98",
        "firstName": "Jack",
        "lastName": "White"
    }
]

json angularjs ace-editor angular-ui
person bofanda    schedule 27.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не совсем понимаю, с какой проблемой вы столкнулись, но мне удалось собрать демонстрацию, которая, кажется, делает то, что вы ищете:

<div ng-repeat="item in aceModel">
  <div ui-ace="aceOption" ng-model="item"></div>
</div>

И в контроллере:

$scope.aceModel = [];
$scope.aceModel[0] = ';; Scheme code in here.\n' + ...
$scope.aceModel[1] = ';; Different code here for the new editor.\n' + ...

Пример: http://plnkr.co/edit/1KlmqopkmbhvKuMy4he2?p=preview

ИЗМЕНИТЬ

Я обновил Plunk с помощью вашего json и отправил его на $scope.aceModel

  var jsonData = [{ // goes to editor one
    "id": "14",
    "firstName": "John",
    "lastName": "Doe"
  }, { // goes to editor two
    "id": "45",
    "firstName": "Bob",
    "lastName": "Smith"
  }, { // goes to editor three
    "id": "98",
    "firstName": "Jack",
    "lastName": "White"
  }];

  $scope.aceModel = [];

  angular.forEach(jsonData, function(value, key) {
    $scope.aceModel.push(JSON.stringify(value, null, 4));
  });

http://plnkr.co/edit/1KlmqopkmbhvKuMy4he2?p=preview

person K Scandrett    schedule 27.11.2016
comment
@K Scandret, спасибо за ответ. Идея состоит в том, что мой Json представлен в виде массива, то есть набора данных json, которые будут повторяться в отдельных редакторах с помощью ng-repeat. И проблема в том, что нельзя привязать Json к редактору (Ace Library), потому что он принимает строковый Json, а не объект или массив, как показано по ошибке. - person bofanda; 28.11.2016
comment
Обновлен плункер с вашими данными json. Это то, что вы имеете в виду? - person K Scandrett; 28.11.2016