Question

我正在尝试将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}}

我知道这不是正确的方式和角度方式。什么是正确的方法？请帮忙

Answer 1

这样的事情对你有用：

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>

Answer 2

ng-model绑定到prop，而不是它的label字段，所以你可能会使用这样的东西：

My Selected Property:  {{selectedpropName.label}}

Answer 3

TLDR：：只需使用ng-click="modelYouWantToSet = valueYouWantItToBe。

作为@pln的answer的替代方法，您可以在ng-click事件中进行如下设置：ng-click="selectedPropName = prop"，而无需这些额外的功能。

因此您的代码将变为： {{prop.label}}

My Selected Property: {{selectedpropName}}

另外，如果您还有其他逻辑需要沸腾，您仍然可以将其设置为类似ng-click="selectedPropName = myCoolFunc(prop)的函数，然后在myCoolFunc中执行所需的操作，然后返回{{ 1}}。

例如，假设我只想设置此属性，当用户单击鼠标或并在元素上按Enter时

模板：

prop

控制器：

<ul ng-repeat="prop in props" 
    class={{prop.selected}} 
    ng-click="selectedPropName = myCoolFunc(selectedPropName, prop)">
    <li ng-cloak >{{prop.label}}</li>
</ul>

在ng-repeat </ul>生成的<ul>列表中使用ng-model

3 个答案: