Как в angular правильно управлять значениями в поле textarea?

Как заставить код на angular работать корректно?
Исходный код выложил на jsbin http://jsbin.com/habeha/1/edit?js,output.

Проблемы появляются после того, когда пользователь изменяет значение любого поля textarea.

Значение в поле textarea не меняется, если сначала отредактировать любое из этих полей, а потом изменить язык. После смены языка, значение в отредактированном поле, не должно оставаться прежним, оно должно заново перерасчитаться и вывестись соответствующее в поле.

JavaScript:
var app = angular.module('app', []);
app.factory('datafactory', function ($http) {
    var personsDataSet = [
        {
            "id": 1,
            "name": "John",
            "langs": [
                { "id": 1, "name": "Ru", "sticker": "my fav lang" },
                { "id": 2, "name": "En", "sticker": "xxx" }
            ]
        },{
            "id": 2,
            "name": "Mike",
            "langs": [{ "id": 1, "name": "Ru", "sticker": "Hate It!" }, { "id": 2, "name": "En", "sticker": "Native" }]
        },{
            "id": 3,
            "name": "Maria",
            "langs": [{ "id": 1, "name": "Ru", "sticker": "bla-bla-bla" }],
        }
    ];
    var langsDataSet = [
        {
            "id": 1,
            "name": "Ru"
        },{
            "id": 2,
            "name": "En"
        }
    ];
    return {
        getPersonsData: function () {
            return personsDataSet;
        },
        getLangsData: function () {
            return langsDataSet;
        }
    };

});

app.controller('main', function ($scope, datafactory) {
    $scope.persons = datafactory.getPersonsData();
    $scope.langs = datafactory.getLangsData();
    $scope.currentLangId = $scope.langs[0].id;
    $scope.resetTxtArea = function (areaId) {
       document.getElementById(areaId).value = $scope.getPersonSticker(this.person);
    };
    $scope.ApplyTxtArea = function (areaId) {
       console.log(document.getElementById(areaId).value);
    };

    $scope.getPersonSticker = function (person) {
        var langs = person.langs.filter(function (lang) {
            return lang.id == $scope.currentLangId;
        });
        if (!langs[0]) {
            return '';
        }
        return langs[0].sticker;
    };
});


HTML:


<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<body ng-app="app" ng-controller="main">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>
                                <select ng-options="lang.id as lang.name for lang in langs" ng-model="currentLangId">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="person in persons">
                            <td>{{person.id}}</td>
                            <td>{{person.name}}</td>
                            <td>
                                <textarea id="{{person.id}}" value="{{getPersonSticker(person)}}">{{getPersonSticker(person)}}</textarea>

                                <button type="button" ng-click="resetTxtArea(person.id)">Reset</button>
                                <button type="button" ng-click="ApplyTxtArea(person.id)">Apply</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <script src="main.js"></script>
</body>
</html>
no image

Аноним

17 ноября, 07:02
309

Нет комментариев

Добавить комментарий
Вы не можете оставлять комментарии. Чтобы добавить комментарий, залогиньтесь или зарегистрируйтесь
Вы не можете голосовать. Чтобы проголосовать, залогиньтесь или зарегистрируйтесь

1 ответ

no image

Аноним

17 ноября, 07:47

Нет комментариев

Добавить комментарий
Вы не можете отвечать на вопросы. Чтобы ответить на вопрос, пожалуйста залогиньтесь или зарегистрируйтесь
Работа в Украине
Вакансии от WORK.ua
Backend Magento Developer
Днепр, SaM Solutions
Сетевой администратор
Киев, Ритейл Групп, ПАО
Копирайтер, блоггер, 10000 грн.
Киев, Національні Іноваційні Проекти, ДП
SEO-специалист
Днепр, Бонтой