获取国家/地区的 id 会返回 Expression 'mid = s.id' is non-assignable答案

【问题标题】：getting the id of countries returns Expression 'mid = s.id' is non-assignable获取国家/地区的 id 会返回 Expression 'mid = s.id' is non-assignable
【发布时间】：2018-05-26 08:17:59
【问题描述】：

我有这个函数，它返回一个名为 mid 的范围来保存要分配给填充状态选择框的国家/地区的 ID。这是初始化的函数和范围

$scope.logId = function() {
        $scope.mid = 1;
        console.log($scope.mid);
        return ($scope.mid);
    };

我有一个国家循环，在循环期间返回 id。尝试在选择选项中将国家/地区的 id 分配给 $scope mid 以更改函数 $scope.logId 的初始 $scope.mid strong> 这样当我调用 get states 函数时，它将接收函数 $scope.logId 的当前 id 我收到此错误

Expression 'mid = s.id' is non-assignable. Element: <option ng-repeat="s in countries" ng-model="mid = s.id" value="{{s.name}}" class="ng-pristine ng-untouched ng-valid ng-binding ng-scope">

这是我进行循环和分配的国家/地区的循环

<option ng-repeat="s in countries" ng-model="mid = s.id" value="{{s.name}}">{{s.name}}</option>

已编辑以显示完整代码

<select ng-click="getCountries()" formcontrol name="country" class="ng-untouched ng-pristine ng-valid" required>



        <option ng-repeat="s in countries" ng-click="mid = s.id" value="{{s.name}}">{{s.name}}</option>

        </select>


    </div>

    <div ng-class = "{'has-error':frmValidation.state.$invalid && !frmValidation.state.$pristine}" class="field required">
      <label>State</label>
      <select ng-click="getStates(mid)" ng-model="reg.state" formcontrol name="state" class="ng-untouched ng-pristine ng-invalid" required >

        <option ng-repeat="s in states" value="{{s.name}}">{{s.name}}</option>
      </select>
    </div>

请协助获取 select option id 的值分配给 scope mid 并从 logId 函数接收，以便每当在 logId 上调用 ng-click 它返回所选国家/地区的当前 id

【问题讨论】：

你不能对ng-model使用赋值运算符，你应该使用ng-model="mid"
如何给它赋值并传递给html中的函数logId
您要分配什么值，请添加一些控制器代码？
this >>> ng-click="mid = s.id" 在选项选择标签期间。但挑战是我无法在选项选择后回到函数 logId 中
你应该首先从控制器调用getCountries

标签： javascript angularjs

【解决方案1】：

请检查此代码：

我还在我的DEMO 中实现了mock API call for countries，请检查

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-change="logId()" name="country"  ng-model="mid" required>
        <option ng-repeat="c in countries" value="{{c.name}}">{{c.name}}</option>
</select>


</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
   
    
    $scope.getCountries = function(){
     $http.get("https://restcountries.eu/rest/v2/all")
    .then(function(response) {
      console.log(response)
        $scope.countries = response.data;
    });
    }
    
    $scope.getCountries();
    


    $scope.logId = function() {
        
        alert($scope.mid);
        
    };
});

</script>

    <p>Please select a country and logId() will be called.</p>

</body>
</html>

请运行上面的sn-p

Here is a working DEMO

【讨论】：

@rocket，我在DEMO 中实现了一个模拟 API 调用，请检查
这些似乎更量身定制，但我的 api 下拉菜单不再拉动
data 更多，因此需要时间将数据填充到下拉列表中
当我的页面加载时，我在实施后收到错误请求的错误
你实现了相同的 api？

【解决方案2】：

试试这种类型的 html 和控制器。检查工作样本here

<select ng-change="getStates()" formcontrol name="country"  ng-model="cid" required>
        <option ng-repeat="c in countries" value="{{c.id}}">{{c.name}}</option>
</select>

<select formcontrol name="state"  ng-model="sid" required>
        <option ng-repeat="s in states" value="{{s.id}}">{{s.name}}</option>
</select>

控制器代码

app.controller('myCtrl', function($scope) {
    $scope.cid = "1";
    $scope.countries = [
        {id : "1", name : "Country 1"},
        {id : "2", name : "Country 2"},
        {id : "3", name : "Country 3"}
    ];


    $scope.getStates = function() {
      console.log($scope.cid);
      someApiCall($scope.cid, function() {
            $scope.states = resultFromAPI;
       }) 
       /* $scope.states = [
          {id : "11", name : "State 1"},
          {id : "12", name : "State 2"},
          {id : "13", name : "State 3"}
      ];*/
    }
});

【讨论】：

我认为你的实现是错误的。请尝试像这样实现w3schools.com/angular/angular_select.asp
我只是硬编码国家和州来进行演示。您也可以调用 apis 并相应地更新列表
我无法发起与您的聊天。我在这里看不到做这样的事情的链接。你到底想要什么？我没明白你最后一条消息的意思！
当前所选国家的 id 在 model 'cid' 中。您可以像“$scope.cid”一样访问它
我应该显示 api 代码，以便您将其调整为硬编码的答案。我试过了，但找不到出路