Javascript 输入类型为'；文本'；在文本框内不显示任何数据 html_Javascript_Html_Angularjs_Textbox_Angularjs Ng Model

Javascript 输入类型为'；文本'；在文本框内不显示任何数据 html

javascript html angularjs

Javascript 输入类型为'；文本'；在文本框内不显示任何数据 html,javascript,html,angularjs,textbox,angularjs-ng-model,Javascript,Html,Angularjs,Textbox,Angularjs Ng Model,因此，我有一个问题，即html复选框上的代码选择正确，文本“hello”应该显示在文本框内，旁边的复选框标记为“c1”，但文本框是空的此代码有任何问题吗？我在一个plunk中重新创建了您的代码，无法重新生成错误。我所做的唯一更改是在设置.eventChannelList之前初始化formData\u EventDescription，因为它会向我抛出错误请看演示 HTML 您使用相同的作用域模型执行ng repeat操作ng model=“comment”如果其中一个数据返回为空，您的输入也

因此，我有一个问题，即html复选框上的代码选择正确，文本“hello”应该显示在文本框内，旁边的复选框标记为“c1”，但文本框是空的

此代码有任何问题吗？

我在一个plunk中重新创建了您的代码，无法重新生成错误。我所做的唯一更改是在设置.eventChannelList之前初始化formData\u EventDescription，因为它会向我抛出错误

请看演示

HTML

您使用相同的作用域模型执行

ng repeat

操作

ng model=“comment”

如果其中一个数据返回为空，您的

输入也将为空，我想您可以尝试使用ng value
而不是ng init谢谢，我没有解释我的代码不起作用，但是对我有用的好的替代方案是的，同样的代码对我不起作用：（我唯一想问的是，如果你观察console，为什么方法ChannelisChecked会被检查这么多次。log这是一个缺陷还是我做错了什么我不是100%确定。看起来它应该只被调用6次。你在ng repeat中有2次调用。因此，每次迭代调用2次，总共3项=6。不确定是什么又发射了，可能和Angular的使用方式有关
                        <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>

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

<!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>

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


});