ng-init для типа ввода 'text' не показывает никаких данных внутри текстового поля

HTML

                        <div class="form-inline col-xs-12"  ng-repeat="c in evnetChannels track by $index">
                            <label class="control-label col-xs-6">
                                <input type="checkbox"
                                       ng-checked="ChannelisChecked(c.channelTypeId)"
                                       ng-click="ChannelToggleCheckbox(c.channelTypeId, $event)">
                                {{c.channelTypeName}}
                            </label>
                            <input class="form-control col-xs-6" type="text" ng-show="c.textRequired=='Y'" ng-init="comment=getComment(c.channelTypeId)" ng-model="comment"
                                   ng-disabled="!ChannelisChecked(c.channelTypeId)" ng-change="setComment(comment,c.channelTypeId)">
                        </div>

Javascript

$scope.ChannelisChecked = function (val) {
    console.log(val);
    var chnl = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
        return channel.channelTypeId == val;
    });
    if(chnl){
        return chnl.isChecked =="Y";
    }
    else {
        return false;
    }
};

$scope.getComment = function (id) {
        console.log('here');
        var chnl = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
            return channel.channelTypeId == id;
        });
        if(chnl){
            console.log(chnl);
            return chnl.comments;
        }
        else {
            console.log('none');
            return null;
        }
    };

    $scope.ChannelToggleCheckbox = function (val, event) {

        var check_true = event.target.checked;
        console.log(val);
        var found = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
            return channel.channelTypeId == val;
        });
        if(!found && check_true){
            var newSelection = _.clone(channel);
            newSelection.channelTypeId = val;
            $scope.formData_EventDescription.eventChannelList.push(newSelection);
        }
        else if (found && !check_true){
            $scope.formData_EventDescription.eventChannelList = _.without($scope.formData_EventDescription.eventChannelList, _.findWhere($scope.formData_EventDescription.eventChannelList,{channelTypeId:val}));
        }
    };



$scope.evnetChannels = [{
      "channelTypeId": 1,
      "channelTypeName": "c1",
      "textRequired": "Y",
      "action": "Y"
    },
    {
      "channelTypeId": 2,
      "channelTypeName": "c2",
      "textRequired": "Y"
    },
    {
      "channelTypeId": 3,
      "channelTypeName": "c3",
      "textRequired": "N"
    }];

$scope.formData_EventDescription.eventChannelList = [{
     "channelTypeId": 1,
     "isChecked": "Y",
     "comments" : "hello"

},
{
     "channelTypeId": 3,
     "isChecked": "Y"
 }];

Поэтому у меня возникла проблема с тем, что код в html-флажках выбран правильно, текст "привет" должен отображаться внутри текстового поля рядом с флажком "c1", но текстовое поле становится пустым.

какие-либо проблемы с этим кодом?

Источник

1 ответ

Я пересоздал твой код в plunk, и я не смог воспроизвести ошибку. Единственное изменение, которое я сделал, было инициализировать formData_EventDescription перед установкой.eventChannelList, потому что это вызывало у меня ошибки.

Посмотреть демо здесь

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
     <script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body  ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
        <div class="form-inline col-xs-12"  ng-repeat="c in evnetChannels track by $index">
                            <label class="control-label col-xs-6">
                                <input type="checkbox"
                                       ng-checked="ChannelisChecked(c.channelTypeId)"
                                       ng-click="ChannelToggleCheckbox(c.channelTypeId, $event)">
                                {{c.channelTypeName}}
                            </label>
                            <input class="form-control col-xs-6" type="text" ng-show="c.textRequired=='Y'" ng-init="comment=getComment(c.channelTypeId)" ng-model="comment"
                                   ng-disabled="!ChannelisChecked(c.channelTypeId)" ng-change="setComment(comment,c.channelTypeId)">
                        </div>
  </body>

</html>

Javascript

angular.module('myApp', [])

.controller('myCtrl', function($scope){

$scope.ChannelisChecked = function (val) {
    console.log(val);
    var chnl = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
        return channel.channelTypeId == val;
    });
    if(chnl){
        return chnl.isChecked =="Y";
    }
    else {
        return false;
    }
};

$scope.getComment = function (id) {
        console.log('here');
        var chnl = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
            return channel.channelTypeId == id;
        });
        if(chnl){
            console.log(chnl);
            return chnl.comments;
        }
        else {
            console.log('none');
            return null;
        }
    };

    $scope.ChannelToggleCheckbox = function (val, event) {

        var check_true = event.target.checked;
        console.log(val);
        var found = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
            return channel.channelTypeId == val;
        });
        if(!found && check_true){
            var newSelection = _.clone(channel);
            newSelection.channelTypeId = val;
            $scope.formData_EventDescription.eventChannelList.push(newSelection);
        }
        else if (found && !check_true){
            $scope.formData_EventDescription.eventChannelList = _.without($scope.formData_EventDescription.eventChannelList, _.findWhere($scope.formData_EventDescription.eventChannelList,{channelTypeId:val}));
        }
    };



$scope.evnetChannels = [{
      "channelTypeId": 1,
      "channelTypeName": "c1",
      "textRequired": "Y",
      "action": "Y"
    },
    {
      "channelTypeId": 2,
      "channelTypeName": "c2",
      "textRequired": "Y"
    },
    {
      "channelTypeId": 3,
      "channelTypeName": "c3",
      "textRequired": "N"
    }];

$scope.formData_EventDescription = {};

$scope.formData_EventDescription.eventChannelList = [{
     "channelTypeId": 1,
     "isChecked": "Y",
     "comments" : "hello"

},
{
     "channelTypeId": 3,
     "isChecked": "Y"
 }];


});
Источник
Другие вопросы по тегам