Question

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复选框上的代码选择正确，文本＆＃34;你好＆＃34;应显示在标有＆＃34; c1＆＃34;的复选框旁边的文本框内但文字框空了。

此代码的任何问题？

Answer 1

我在plunk中重新创建了代码，但我无法重新生成错误。我做的唯一更改是在设置.eventChannelList之前初始化formData_EventDescription，因为它给我带来了错误。

请参阅演示here

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"
 }];


});

ng-init用于输入类型＆＃39; text＆＃39;没有在文本框中显示任何数据

HTML

的JavaScript

1 个答案: