AngularJS - 没有键值对象的两种方式绑定

只是为了说明，我对angularJS一无所知，我之前和knockoutJS一起工作，当涉及角度时，我只是在做出假设。AngularJS - 没有键值对象的两种方式绑定

我有这样的代码：

angular.module("umbraco").controller("recallCtrl", 
function ($scope, $routeParams) { 

    $scope.dcList = { 
     key: "value", 
     abc: "aaaa", 
     prop: "tadaa!" 
    } 
});

和标记如下：

<div ng-controller="recallCtrl"> 
     <table class="table table-sm"> 
      <thead> 
       <tr> 
        <td></td> 
        <th>Key</th> 
        <th>Value</th> 
       </tr> 
      </thead> 
      <tr ng-repeat="(key, value) in dcList"> 
       <td> 

       </td> 
       <td> 
        <input ng-model="key" /> 
       </td> 
       <td> 
        <input ng-model="value"/> 
       </td> 
      </tr> 

     </table> 

     <pre>{{dcList | json}}</pre> 
    </div>

所以应该在HTML完结的dcList输出改变，当我修改相应的输入它的价值，其因为我认为必然会反对？

如果我做错了，请指教。我想创建对象并能够更改其键和值。

来源

2016-09-21 Raimonds

你应该声明你模块是这样的：'angular.module（ “一把umbraco”，[]）'。你忘了方括号，你基本上是要求模块不声明它。我希望它能解决你的问题！ –

'ng-model'相对于当前范围进行评估，在这种情况下本地化为'ng-repeat'。我不认为你可以改变*键*，但*值*正在更新 - 你只是没有看到它，因为它不影响父对象上的'dcList'对象。为了更新'dcList'属性的*值*，你必须在'ng-repeat'中使用'ng-model =“dcList [key]”'。 – Lex

@Peter_Fretter不是在这种情况下，正如我所说，我完全不知道角度和它是如何工作的，只是假设，但我使用Umbraco CMS，它是在角度帮助下构建的，因为我假设我正在注入我的一块代码到现有的ng片段，这就是为什么我没有ng-app声明，如果我设置方括号，它只是打破 – Raimonds

当前的代码是不工作的原因是因为“键“和”值“变量在ng-repeat范围内，不再直接引用原始对象。

保持附加的“值”很容易，只需使用而不是value。添加新的密钥需要更多的工作。在这里，我将ng-blur附加到每个“密钥”字段，该字段在字段模糊时将启动一个新密钥。（ng-change会在每次击键时创建一个新字段，这不是您想要的。）请注意，当您开始输入新密钥时，其值似乎消失 - 这是因为立即引用新密钥名称。当然，这在真实的用户界面中会有些混乱。您可能想要将不同的行为编入createNewKey函数（例如，将旧值复制到新密钥或删除原始密钥）。

function recallCtrl($scope) { 
 
    $scope.dcList = { 
 
     key: "value", 
 
     abc: "aaaa", 
 
     prop: "tadaa!" 
 
    } 
 
    
 
    $scope.createNewKey = function(k) { 
 
     $scope.dcList[k]=""; 
 
    } 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
<div ng-controller="recallCtrl"> 
 
    <table class="table table-sm"> 
 
     <thead> 
 
      <tr> 
 
       <th>Key</th> 
 
       <th>Value</th> 
 
      </tr> 
 
     </thead> 
 
     <tr ng-repeat="(key, value) in dcList"> 
 
      <td> 
 
       <input ng-model="key" ng-blur="createNewKey(key)"/> 
 
      </td> 
 
      <td> 
 
       <input ng-model="dcList[key]"/> 
 
      </td> 
 
     </tr> 
 
    </table> 
 

 
    <pre>{{dcList | json}}</pre> 
 
    </div>

来源

2016-09-21 13:47:32

感谢您的好解释:)我想我可以根据我的需要调整它。 – Raimonds

'key'和'value'不会像你所说的那样变成原语。您可以通过在OP原始代码的“”元素旁边添加“{{key}}”和“{{value}}”来验证。您会看到，当您更新“”中的值时，相应的“key”或“value”也会更新。 – Lex

@Lex，你是对的;谢谢你。我会纠正答案。 –

请测试该代码，改变相应的键的值，

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 

 
    $scope.dcList = { 
 
     key: "value", 
 
     abc: "aaaa", 
 
     prop: "tadaa!" 
 
    } 
 
    })

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 

 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
     <table class="table table-sm"> 
 
     <thead> 
 
      <tr> 
 
       <td></td> 
 
       <th>Key</th> 
 
       <th>Value</th> 
 
      </tr> 
 
     </thead> 
 
     <tr ng-repeat="(key, value) in dcList"> 
 
      <td> 
 

 
      </td> 
 
      <td> 
 
       <input ng-model="key" disabled/> 
 
      </td> 
 
      <td> 
 
       <input ng-model="dcList[key]" /> 
 
      </td> 
 
     </tr> 
 

 
    </table> 
 

 
    <pre>{{dcList | json}}</pre> 
 
    </div> 
 
</body> 
 

 
</html>

Here is the plunker

来源

2016-09-21 13:35:10 Sravan

这只能回答一半的问题。 –

是的，因为更改密钥的哈希是不正确的事情，我现在禁用了键，我只是等待，如果提问者要我扩大我的答案。 – Sravan

这是没有必要的，我已经知道为什么这是一个坏主意，以前没有做过这样的事情，所以我没有想到奇怪的，但预期的UI行为，感谢解释。 – Raimonds

AngularJS - 没有键值对象的两种方式绑定

回答

相关问题