Question

我已经在本网站上回顾了很多答案/问题，但似乎没有一个能解决我的问题。如果我错了，我道歉。

以下是我的示例的链接，因此您可以看到我的代码及其行为：Sample Code

考虑两个对象：

items = {
    a: "apple",
    b: "banana"
};

lines = [
    {key: "a"},
    {key: "b"},
    {key: "b"},
    {key: "a"}
];

我按如下方式显示：

<div ng-repeat="line in lines">
   <div ng-click="clicked(items[line.key])">
      {{items[line.key]}}
  </div>
</div>

请注意，“lines”包含重复值，而items是一组（唯一项目）。

在我创建的应用程序中，当用户点击其中一行时，我需要提供一个输入字段，用于更新行键所指向的项目。而且，我需要双向绑定，以便通过输入的更改自动反映在整个行中。

在我的示例中（参见上面的链接），我添加了两个输入标记：

Input 1: <input ng-model="items.a">
Input 2: <input ng-model="mymodel">

输入＃1使用对项目的显式引用来设置ng-model。输入＃2使用$ scope内存在的变量设置ng-model的值。

<div ng-click="clicked(items[line.key])">

当用户通过ng-repeat点击div（line）输出时，mymodel的值会发生变化。

输入1按预期工作。通过输入所做的更改会自动反映在生成的div中。

输入2表示我要完成的任务：将输入元素中的ng-model动态绑定到用户单击的div行中的相同模型。在我提供的示例中，输入中显示了正确的文本，但它与具有相同键的div行之间没有双向绑定。

这是我的完整脚本：

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

myApp.controller("mainCtrl", function ($scope) {
    $scope.items = {
        a: "apple",
        b: "banana"
    };
    $scope.lines = [
        {key: "a"},
        {key: "b"},
        {key: "b"},
        {key: "a"}
    ];
    $scope.mymodel = $scope.items.a;

    $scope.clicked = function(key) {
      $scope.mymodel = key;
    };
});

这是我的index.html：

<!DOCTYPE html>
<html>
  <body ng-app="myApp" ng-controller="mainCtrl">
    Input 1: <input ng-model="items.a">
    Input 2: <input ng-model="mymodel">
    <div ng-repeat="line in lines">
      <div ng-click="clicked(items[line.key])">{{items[line.key]}}</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="script.js"></script>
</body>

提前感谢您的帮助！

Answer 1

我将如何做到这一点。只需将您的mymodel变量设为＆＃39;键即可。值，并通过该键将其链接到输入。 Plunker

$scope.clicked = function(key) {
  $scope.mymodel = key;
};

然后将你的html切换到这个。

Input 1: <input ng-model="items.a">
Input 2: <input ng-model="items[mymodel]">
<div ng-repeat="line in lines">
  <div ng-click="clicked(line.key)">{{items[line.key]}}</div>
</div>

通过Javascript设置Angularjs ng-model值

1 个答案: