Angularjs: ng-model 显示不正确

Question

我有父子控制器关系。这是基本功能的非工作模型。我敢肯定任何比我更有能力的人都能让它在 Plunker 或 Fiddle 模型上工作。（所以可能有问题：$scope.data.contactList = [{ID: 1, Email: "someemail@email.com"}, {ID: 2, Email: "anotheremail@email.com"}] ;) 我尝试为 contactList 数组创建一些对象。

无论如何。我希望能够在下面的代码中单击第二个 table 中的 link 来调用 EditShowContact。在我的实际应用程序中，这将显示一个隐藏的 div，并且它显然会显示联系人的更多属性，而不仅仅是电子邮件。

在我的实际程序中，table 的值已正确填写（即我的 ng-repeat 指令工作正常），但我似乎无法让 ng-model 指令响应。我尝试了各种不同的方法，但似乎没有任何效果。

<html ng-app="myApp"><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>

var app = angular.module('myApp', []);

app.controller('ContactsController', function ($scope)
{   
    this.currentContactID = null;
    this.EditShowContact = function(intContactID)
    {   
        this.currentContactID = intContactID;
        //this.currentContact = $scope.data.contactList[intContactID]; unclear why this assignment fails
    };
});

app.controller('ActionsController', function ($scope)
{   $scope.data = {}; 
    $scope.data.contactList = [{ID: 1, Email: "someemail@email.com"}, {ID: 2, Email: "anotheremail@email.com"}];    
});

</script>
</head>
<body ng-controller="ActionsController as ActCtrl">

<div ng-controller="ContactsController as ContactsCtrl">
    <table border = "1";>
        <tr><th>Email</a></th>
            <th>Name</th></tr>
    </table>
    <div >
        <table  ng-repeat="Contact in ContactsCtrl.data.contactList" border="1">
            <tr>
                <td><a href="" ng-click="ContactsCtrl.EditShowContact(Contact.ID)" style="padding-left: 5px;">{{Contact.Email}}</a></td>
                <td>{{Contact.Name}}</td>
            </tr>
        </table>
    </div>
    <div>
        <form>
            <input type="input" ng-model="ContactsCtrl.data.contactList[currentContactID].Email"></input>
        </form>
    </div>
</div>
</body>
</html>

Answer 1

这里有很多错误，例如：

ContactsCtrl 没有关于 ContactList 的信息。您正在尝试使用 index 中的 ID 在数组中查找对象，使用 <div> 中的 <table> 元素等等..

基本上，我已经将两个控制器的需求减少到一个，并制作了一个 Working Demo。

Angularjs: ng-model 显示不正确

Angularjs: ng-model not displaying properly

angularjs

angularjs-scope

angularjs-ng-model