Могу ли я нажать, а затем отобразить данные из массива в Angular - PullRequest
Новая
       5

Могу ли я нажать, а затем отобразить данные из массива в Angular

0 голосов
/ 19 мая 2018

Я хочу добавить контакт и контактную информацию, отправив их контроллеру MVC в виде объекта и списка.Сначала я сделал поля ввода в HTML с областями действия и пустым массивом в контроллере, затем я повторил его, чтобы отобразить вставленные данные.но, к сожалению, console.log сообщает неопределенные объекты.

Контроллер 

 .controller("forwardersCon", function ($scope, forwardersSrv) {

    $scope.contactsdetails = [];

    $scope.add = function ()
    {
        $scope.contactsdetails.push({ Contactname: $scope.contname, Contacttype: $scope.conttype, phones: $scope.contphn, fax: $scope.contfax })
        console.log($scope.contactsdetails);
    }

})

HTML 

<body ng-app="forwarders" ng-controller="forwardersCon">
<div class="form-horizontal">
    Company name<input type="text" id="contname" class="form-control" ng-model="contname" />
    Company type<select class="form-control" ng-model="conttype">
        <option>Shipping Line</option>
        <option>Logistics</option>
    </select>
    Company Phone<input type="text" id="contphn" class="form-control" ng-model="contphn"/>
    Company Email<input type="text" id="contfax" class="form-control" ng-model="contfax"/>
</div>
<br />
<table class="table table-responsive" id="salesdetails1">
    <tr>
        <th>Sales Name</th>
        <th>Sales Phone</th>
        <th>Sales Email</th>
        <th>Sales Fax</th>
    </tr>
    <tr>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><button type="button" class="btn btn-success" id="add" ng-click="add()">Add</button></td>
    </tr>
</table>

<h4>Contact Details</h4>

<table class="table table-responsive" id="salesdetails2">
    <tr ng-repeat="c in contactsdetails">
        <td>{{c.Contactname}}</td>
        <td>{{c.Contacttype}}</td>
        <td>{{c.phones}}</td>
        <td>{{c.fax}}</td>
    </tr>
</table>


<script src="~/Scripts/angular.js"></script>
<script src="~/AnglForwarder.js"></script>
<script src="~/Scripts/jquery-3.1.1.js"></script>

любая помощь, как нажатьвставленные данные из поля ввода в массив, а затем отобразить их в таблице HTML.Большое спасибо

1 Ответ

0 голосов
/ 19 мая 2018

Проблема возникает из-за того, что вы «думаете», что добавляете данные о продажах, когда нажимаете кнопку «Добавить», но при заполнении массива используете модели сведений о компании.

Не более ли логично, что вы добавляете данные о компании рядом с кнопкой добавления?

Рабочий пример здесь: 

angular
.module("forwarders", [])
.controller("forwardersCon", function ($scope) {

    $scope.contactsdetails = [];

    $scope.add = function ()
    {
        $scope.contactsdetails.push({ Contactname: $scope.contname, Contacttype: $scope.conttype, phones: $scope.contphn, fax: $scope.contfax })
        console.log($scope.contactsdetails);
    }

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<body ng-app="forwarders" ng-controller="forwardersCon">

<table class="table table-responsive" id="salesdetails1">
    <tr>
        <th>Company Name</th>
        <th>Company Type</th>
        <th>Company Phone</th>
        <th>Company Email</th>
    </tr>
    <tr>
        <td><input type="text" id="contname" class="form-control" ng-model="contname" /></td>
        <td><select class="form-control" ng-model="conttype">
        <option>Shipping Line</option>
        <option>Logistics</option>
    </select></td>
        <td><input type="text" id="contphn" class="form-control" ng-model="contphn"/></td>
        <td><input type="text" id="contfax" class="form-control" ng-model="contfax"/></td>
        <td><button type="button" class="btn btn-success" id="add" ng-click="add()">Add</button></td>
    </tr>
</table>

<h4>Contact Details</h4>

<table class="table table-responsive" id="salesdetails2">
    <tr ng-repeat="c in contactsdetails">
        <td>{{c.Contactname}}</td>
        <td>{{c.Contacttype}}</td>
        <td>{{c.phones}}</td>
        <td>{{c.fax}}</td>
    </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...