在选择选项中获取所选项目的 id 并将其发送到 URL

Posted 2023-03-16

【中文标题】在选择选项中获取所选项目的 id 并将其发送到 URL

【英文标题】：get the id of selected item in select option and send it to an URL

【发布时间】：2016-01-25 00:48:03

【问题描述】：

我在将所选项目的 ID 从选择输入发送到我的休息服务时遇到问题，我有两个控制器，第一个显示所有类：

.controller("classNameCtrl", ["$scope", "$http",function ($scope, $http) 

    $http(method: 'GET', url: 'URL/Classes')

       .success(function (data) 
           $scope.posts = data; // response data  
           $scope.countSelected = $scope.posts[0].Id;    
           console.log('Selected count ID: ' + $scope.countSelected);
           console.log("success");
        )

        .error(function (data, status, headers, config) 
           console.log("data error ...");
                            );

        $scope.onchange = function(id) 
        console.log("id:"+$scope.countSelected);
            ])

以及我从选择输入中获取所选项目 ID 的控制器：

.controller("etudajoutCtrl", ["$scope", "$http", function ($scope, $http) 
        $scope.listetud = function () 

          $http(method: 'POST',
          url:'URL/Students/ajout' ,
          data:'"FirstName":"tomy","ClassId": "'+$scope.countSelected+'"')
          .success(function (data) 
            console.log("success");
             ).error(function (data, status, headers, config) 
            console.log("data error ...");
             );
    ])

这是我的 html 代码：

    <div ng-controller="classNameCtrl">
        <select>
            <option ng-model="countSelected" ng-change="onchange(posts[countSelected-1])" ng-repeat="post in posts" >post.Libel</option>
        </select>
    </div>  
</section>  

这是我在加载页面和为选择输入选择其他项目时总是得到的结果：

Selected count ID: 1
app.js:2335 success

非常感谢您的帮助

【问题讨论】：

您应该在select 上使用ng-model 而不是option docs.angularjs.org/api/ng/directive/select

【参考方案1】：

您的 HTML 应该对整个选择使用 ng-model。您不能在<option> 中多次使用ng-model 指令，因为它不会正确绑定。

另外，将 value 属性设置为一个数字，以便 countselected 成为一个数字。

使用数字的最佳方法是使用 $index 进行迭代

<div ng-controller="classNameCtrl">
    <select ng-model="countSelected" ng-change="onchange(posts[countSelected-1])">
        <option ng-repeat="post in posts track by $index" value="$index" >post.Libel</option>
    </select>
</div>  

来源：https://docs.angularjs.org/api/ng/directive/select

【讨论】：

感谢 cjds 的回复，但这是我应用您的代码并从输入中选择项目时得到的结果：Selected count ID: 1 success id:$index

@hanali 我的错误。我忘记在选项中添加角度绑定标签

@hanali 我注意到你有时不会在你的个人资料中这样做，它可以作为一种道德提升并给我们加分。因此，如果您评论为什么不接受任何答案，通常会很感激。

感谢 cdjs 现在可以正常工作，但是如何将 $index 值发送到 etudajoutCtrl 控制器的 URL？

@hanali 。这是option value 内的普通角度标签。只需将其更改为您需要的任何内容，...。

【参考方案2】：

虽然我认为使用 $index 作为值是一种绝妙的方法，但我建议在这种情况下使用内置的 ng-options。

假设数据结构：

angular.module('test', [])

.controller('Test', function($scope) 
  $scope.posts = [
    Id: 1,
    Libel: 'one'
  , 
    Id: 2,
    Libel: 'two'
  , 
    Id: 3,
    Libel: 'three'
  ]
  
  // $scope.countSelected = 2; // add this if you need to pre-select
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <select ng-model="countSelected" ng-options="post.Id as post.Libel for post in posts" ng-change="onchange(countSelected)"></select>
</div>