通过 Javascript 设置 Angularjs ng-model 值答案

【问题标题】：Setting Angularjs ng-model value through Javascript通过 Javascript 设置 Angularjs ng-model 值
【发布时间】：2014-05-08 22:16:46
【问题描述】：

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

这是我的示例的链接，因此您可以查看我的代码及其行为：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>

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

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

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

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>

提前感谢您的帮助！

【问题讨论】：

尊重dot rule 并在$scope.mymodel 中使用对象而不是原语。
您是否知道 ng-repeat 会为每次迭代创建一个新的隔离范围？
我知道这一点，但我正在为我的用例寻找解决方案。你会提出什么解决方案？
黑洞和凡人，我们也有帮助。谢谢！

标签： angularjs angular-ngmodel

【解决方案1】：

我会这样做。只需让您的 mymodel 变量成为“键”值，并通过该键将其链接到输入。 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>

【讨论】：

是的......这就是我想要完成的。谢谢！
@user1519054，正确的人。祝你好运！如果您满意，请接受答案。