javascript 在 ng-repeat 生成的 <ul> 列表中使用 ng-model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26116969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use ng-model in <ul> list generated by ng-repeat
提问by orikoko
I am trying to add ng-model to each <li>in my <ul>, so I can show the <li>label that I am clicking in my list.
我正在尝试将 ng-model 添加到<li>我的每个中<ul>，以便我可以显示<li>我在列表中单击的标签。
<ul ng-repeat="prop in props" class={{prop.selected}} ng-click="setSelected(prop )" ng-model="selectedpropName">
<li ng-cloak >{{prop.label}}</li>
</ul>
My Selected Property: {{selectedpropName}}
I know that this is not correct way and angular way to do it. What is the right way? Please help
我知道这不是正确的方法和角度的方法。什么是正确的方法？请帮忙
回答by pln
Something like this should work for you:
像这样的事情应该适合你：
function test($scope)
{
$scope.setSelected = function(prop) {
$scope.selectedprop = prop;
};
$scope.props = [{label: "Aaaaaa"},{label: "Bbbbbb"},{label: "Cccccc"}];
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>li.selected {text-decoration: underline;}</style>
<div ng-app="" ng-controller="test">
<ul>
<li ng-repeat="prop in props" ng-click="setSelected(prop)" ng-class="{selected: prop == selectedprop}" ng-cloak="">{{prop.label}}</li>
</ul>
My Selected Property: {{selectedprop.label}}
</div>回答by Jevgeni
ng-model binds to the prop, not to it's labelfield, so you probably use something like this:
ng-model 绑定到prop，而不是它的label字段，所以你可能会使用这样的东西：
My Selected Property: {{selectedpropName.label}}
回答by maxshuty
TLDR:Just use ng-click="modelYouWantToSet = valueYouWantItToBe.
TLDR：只需使用ng-click="modelYouWantToSet = valueYouWantItToBe.
As an alternative to @pln's answeryou could can set it in the ng-clickevent like this: ng-click="selectedPropName = prop"and get rid of the need for these extra functions.
作为@pln答案的替代方案，您可以在这样的ng-click事件中进行设置：ng-click="selectedPropName = prop"并摆脱对这些额外功能的需求。
So your code would become: {{prop.label}}
所以你的代码会变成：{{prop.label}}
My Selected Property: {{selectedpropName}}
Additionally if you have extra logic you need to boil in you can still set it to a function like this ng-click="selectedPropName = myCoolFunc(prop)and then in myCoolFuncyou can do what you need, and then return the prop.
此外，如果您有额外的逻辑需要煮沸，您仍然可以将其设置为这样的函数ng-click="selectedPropName = myCoolFunc(prop)，然后myCoolFunc您可以执行所需的操作，然后返回prop.
For example lets say I wanted to onlyset this property when the user does a mouse click orpresses enter on the element:
比如可以说，我想只有当用户不点击鼠标设置该属性或印刷机的元素输入：
Template:
模板：
<ul ng-repeat="prop in props"
class={{prop.selected}}
ng-click="selectedPropName = myCoolFunc(selectedPropName, prop)">
<li ng-cloak >{{prop.label}}</li>
</ul>
Controller:
控制器：
$scope.myCoolFunc = function(originalProp, newProp) {
return (e && (e.type === 'click' || e.keyCode === 13) ?
newProp :
originalProp;
};
