Angularjs textarea ng-model свойство объекта каждая строка

Я использую angularjs, и я ищу решение для использования текстовой и ng-модели двухсторонней привязки между каждой строкой в textarea и конкретным свойством в массиве объектов.Angularjs textarea ng-model свойство объекта каждая строка

Например:

массив будет выглядеть следующим образом:

array = [{ 
    index: 1, 
    value: "text line 1" 
}, { 
    index: 2, 
    value: "text line 2" 
}, { 
    index: 3, 
    value: "text line 3" 
}]

И TextArea будет выглядеть следующим образом:

text line 1 
text line 2 
text line 3

Thank

источник

2016-11-29 matanhuja

Вы можете использовать отдельные входы вместо текстовое поле?

<input ng-model="line-1"> 
<input ng-model="line-2"> 
<input ng-model="line-3"> 

{{line-1}} 
{{line-2}} 
{{line-3}}

В противном случае вам нужно будет разделить текст на основе возврата символов.

<textarea ng-model="myText"></textarea> 
<div ng-repeat="line in lines"> 
    {{line}} 
</div>

И добавить Бодрствующую для изменений в контроллере:

angular.module('myapp').controller('myController', function($scope){ 
    $scope.lines = []; 
    $scope.$watch('myText', function(newValue, oldValue){ 
     $scope.lines = newValue.split('\n'); 
    }); 
});

Вы также можете использовать фильтр вместо наблюдателя, но я думаю, что это поможет вам начать работу.

При получении данных из БД в контроллере, вы можете переформатировать MYTEXT быть строкой, как так:

$scope.myText = db_array.map(function(obj){ 
    return obj.value; 
});

Это создаст массив: ['text line 1', 'text line 2', 'text line 3']

Затем используйте присоединитесь, чтобы конвертировать в то, как вы хотите, чтобы оно находилось в текстовом поле:

$scope.myText = $scope.myText.join('\n');

источник

2016-11-29 20:07:38

благодарственное, О первом варианте, я знаю, что это вариант. Второй вариант немного проблематичен, потому что, когда я получаю объект из базы данных, он получает как массив объектов, и мне нужно отображать его на экране и разрешать его обновлять. – matanhuja

Можете ли вы использовать 'array.map'? Вы можете переформатировать полученные данные как строку. –

Я отредактировал свой ответ, чтобы сделать то, о чем вы думаете. Честно говоря, это больше осложнений, чем вам действительно нужно для простого текстового поля. Почему вы не можете хранить все строки в db как одну строку? –

Вы можете попробовать что-то простое, как это, если вы предпочитаете, чтобы создать директиву

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

 
myApp.controller('MyController', ['$scope','$timeout', function($scope,$timeout) { 
 
    $scope.array = [{ 
 
    index: 1, 
 
    value: "text line 1" 
 
    }, { 
 
    index: 2, 
 
    value: "text line 2" 
 
    }, { 
 
    index: 3, 
 
    value: "text line 3" 
 
    }]; 
 

 
    $scope.getItems = function(){ 
 
    var items = ""; 
 
    $scope.array.forEach(function(item){ 
 
     items+=item.value+"\n"; 
 
    }); 
 
    return items; 
 
    } 
 
    $scope.deleteItem = function(item){ 
 
    var index = $scope.array.indexOf(item);  
 
    $scope.array.splice(index,1); 
 
    }; 
 
}]);

textarea{ 
 
    width: 50%; 
 
    height: 5em; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 
<body ng-app="myApp"> 
 
    <section ng-controller="MyController"> 
 
    <textarea>{{ getItems() }}</textarea> 
 
    <div ng-repeat="item in array"> 
 
    <input type="text" ng-model="item.value"> 
 
    </div> 
 
    </section> 
 
</body> 
 
</html>

источник

2016-11-29 20:21:33 Hoyen

Angularjs textarea ng-model свойство объекта каждая строка

ответ

Смежные вопросы