0

我在这个网站上查看了许多答案/问题，但似乎没有一个能解决我的问题。如果我错了，我道歉。

这是我的示例的链接，因此您可以查看我的代码及其行为：示例代码

考虑两个对象：

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>

请注意，“行”包含重复值，并且项目是一组（唯一项目）。

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

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

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（行）输出时，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>

提前感谢您的帮助！

4

1 回答 1

2

这是我将如何做到的。只需让您的 mymodel 变量成为“键”值，并通过该键将其链接到输入。普朗克

$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>
于 2014-05-08T22:45:58.607 回答