javascript - 类型错误 : Cannot read property 'fname' of undefined

标签 javascript html css angularjs

这是 HTML 表单。单击“编辑”按钮时,我需要将条目放回表格。它指向脚本函数 selectEdit()

<div ng-app="MyApp" ng-controller="mainController">
    <div class=container>
        <form ng-submit="addItem()" name="myForm">
        <br>
        <br>
        <br>
        <br>
        <h1> Add Member </h1>

        <div class="form-group">
        <div class="col-xs-3">

        <input type="text" placeholder="first name" ng-model="fname" required class="form-control"
        > <br> 
        <input type="text" placeholder="last name" ng-model="lname" required class="form-control"> <br> 
        <input type="email" placeholder="Email" ng-model="email" name="myEmail" class="form-control"> <br> 
        <span ng-show="myForm.myEmail.$error.email"> Not a Valid Email Address </span>
        <input type="number" placeholder="contact number" ng-model="contact" required class="form-control"> <br> 
        <input type="text" placeholder="address" ng-model="addres" required class="form-control"> <br> 
        <input type="submit" value ="Submit"> 
        </div>
        </div>

        </form>

        </div>

        <div class="container">

        <h1>  Address Book </h1>
        <hr>

            <table class= "table table-hover" > <br> <br>

                    <tr>
                        <th>Name </th>
                        <th>Email </th>
                        <th>Contact Number </th>
                        <th>Address</th>
                        <th>Options</th>
                    </tr>   

                    <tr>
                        <th><input type="text" ng-model="searchFname" placeholder="search"> </th>
                        <th><input type="text" ng-model="searchEmail" placeholder="search"> </th>
                        <th><input type="text" ng-model="searchContact" placeholder="search"> </th>
                        <th><input type="text" ng-model="searchAddress" placeholder="search"> </th>
                        <th><input type="text" disabled="sfd" > </th>
                    </tr>       

                    <tr ng-repeat="x in address | orderBy: 'fname' | filter:{fname:searchFname, email:searchEmail, contact:searchContact, addres:searchAddress}"> 

                        <td> {{x.fname + " " + x.lname}} </td>
                        <td> {{x.email}} </td>
                        <td> {{x.contact}} </td>
                        <td> {{x.addres = $index}} </td>
                        <td> <input type="button" value="edit" ng-click="selectEdit($index)"> | <input type ="button" value="delete" ng-click="remove($index)"></td>

                    </tr>
            </table>
        </div>

</div>

问题是我无法将条目放回表单中。它错误无法读取未定义的属性“fname”

<script type="text/javascript">
        var app = angular.module("MyApp", []);

        app.controller("mainController", function($scope) {

            $scope.x = [];
            $scope.address= [];
            $scope.fname = "";
            $scope.lname = "";
            $scope.email = "";
            $scope.contact = "";
            $scope.addres = "";

            $scope.addItem = function() {
                $scope.address.push({
                    fname: $scope.fname,
                    lname: $scope.lname,
                    email: $scope.email,
                    contact: $scope.contact,
                    addres: $scope.addres
                });

            $scope.fname = "";
            $scope.lname = "";
            $scope.email = "";
            $scope.contact = "";
            $scope.addres = "";

            };

            $scope.remove = function(index) {
                var isConfirmed = confirm("Are you sure to delete this record?");

                if(isConfirmed) {
                    $scope.address.splice(index,1);

                }
                else {
                    return false;
                }

            };

            $scope.selectEdit = function(index) {
                console.log(index);
                var chenes = getSelectedIndex(index);
                var list = $scope.address[chenes];
                $scope.fname = list.fname;
                $scope.lname = list.lname;
                $scope.email = list.email;
                $scope.contact = list.contact;
                $scope.addres = list.addres;


            };

            function getSelectedIndex(index){
            for(var i=0; i<$scope.address.length; i++)
                if($scope.address[i].index==index)
                    return i;
                return -1;  
        };

        });



    </script>

最佳答案

地址数组似乎不包含chenes, 尝试在此行之前执行 chenes 和地址的 console.log:var list = $scope.address[chenes];

我猜测地址项中不存在属性索引并且 chenes 的值为 -1,这就是 list 未定义的原因(是什么导致了您的错误)

关于javascript - 类型错误 : Cannot read property 'fname' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44144351/

相关文章:

html - 是否可以仅使用 html/css 创建背景图像 slider

javascript - 如何访问 reactjs 中的禁用按钮并更改其 CSS?

javascript - 当变量为 null 或未定义时 IE9 javascript 错误

javascript - 使用 javascript(没有 jQuery)在标签中应用样式

javascript - 使用 "this"对象,有没有一种简单的方法(在JS函数中)来获取被单击的标签的值

javascript - 通过 JS 添加类时隐藏 div

PHP HTML解码

javascript - iframe 不会居中

jquery - 如何在悬停时在 bootstrap 中扩展 div col

css - 我如何修复 css 中 @media 的错误?