Question

我有一个项目列表（“locals”数组），我在列表中显示

<ul class="list-group">
            <li ng-repeat="loc in locals" class="list-group-item"><a href="" data-id={{loc.ID}}>{{loc.location}}</a>
            </li>
 </ul>

我希望用户能够选择一个项目，然后在代码中使用此项目。这是什么首选方式。

此外，我正在创建移动应用程序，因此我应该能够知道用户在移动设备中选择了此项目（而不仅仅是使用鼠标点击）。

Answer 1

您可以使用角度js ng-click事件（在ng-repeat所在的项目上，并执行以下操作：fiddle

控制器的代码片段：

function MyCtrl($scope) {
    $scope.templateList = [{id:1, name: 'Template1'}, {id:2, name: 'Another Template'}]

    $scope.template = {};
    $scope.setValue = function(list) {
        $scope.template.template_id = list.id;
        $scope.template.template_name = list.name;
    }
}

HTML：

<div ng-app>
 <form ng-controller="MyCtrl">
    <input type="hidden" name="template_id" ng-model="template.template_id" />
    <input type="text" name="template_name" ng-model="template.template_name" />
    <ul>
        <li ng-repeat="list in templateList" ng-click="setValue(list)">{{list.name}}</li>
    </ul>
</form>
</div>

Answer 2

试试这个：

在html中，

<ul class="list-group">
        <li ng-repeat="loc in locals" class="list-group-item">
          <a href="" data-id={{loc.ID}} ng-click="selectLoc(loc.location)">
            {{loc.location}}
          </a>
        </li>
 </ul>

在JS中，

$scope.selectLoc = function(location){
  console.log(location);
     //Here you will get the selected location.
   var SomeVar = location;
 }

希望这会有所帮助......

检测li的用户选择

2 个答案: