Question

我有两个选择框div用于获得主队和Awayteams第一局和第二局的得分细节

这两个div在我的网页中带有标签按钮的同一页面。

但是当我使用这种方式时，我的浏览器会在我的日志中挂起而没有任何错误消息。

因此，我需要在两局中使用相同的ng-model进行代码重用。

但是当我使用我的浏览器时会挂起

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.score =
{
    "_id" : "586eb3a1d9913941d6494bf7",
    "battingDetails" : [
        {
            "battingId" : "1",
            "playerId" : "586150f2d99139510b4254bb"
        },
        {
            "battingId" : "2",
            "playerId" : "586150f2d99139510b4254b1"
        }
    ],
    "bowlingDetails" : [
        {
            "bowlingId" : "1",
            "bowlerId" : "586150f2d99139510b4254b2"
        }
    ]
}   

$scope.homePlayers = [{
    "id": "586150f2d99139510b4254bb",
    "name": "Sachin Tendulkar",
    "country": "India"
}, {
    "id": "586150f2d99139510b4254b1",
    "name": "Saurav Ganguly",
    "country": "India"
}];

$scope.awayPlayers =
[{
    "id": "586150f2d99139510b4254b2",
    "name": "Shane Watson",
    "country": "Aus"
}, {
    "id": "586150f2d99139510b4254b3",
    "name": "Steve Waugh",
    "country": "Aus"
}];

});

这是我对应的html页面

<body ng-app="plunker" ng-controller="MainCtrl">

India batting vs Aus bowling<br>
    <div class="row">
        <span ng-repeat="battingDetail in score.battingDetails">
            <select ng-model="battingDetail.playerId">
            <option ng-repeat="eachhomePlayers in homePlayers" value="{{eachhomePlayers.id}}">{{eachhomePlayers.name}}</option>
        </select> 
        </span>
        <span ng-repeat="bowlingDetail in score.bowlingDetails">
            <select ng-model="bowlingDetail.bowlerId">
            <option ng-repeat="eachawayPlayers in awayPlayers" value="{{eachawayPlayers.id}}">{{eachawayPlayers.name}}</option>
        </select>
        </span>
        <button ng-click="update('home')">Update</button>
    </div>

Aus batting vs India bowling<br>
    <div class="row">
        <span ng-repeat="battingDetail in score.battingDetails">
            <select ng-model="battingDetail.playerId">
            <option ng-repeat="eachawayPlayers in awayPlayers" value="{{eachawayPlayers.id}}">{{eachawayPlayers.name}}</option>
        </select> 
        </span>
        <span ng-repeat="bowlingDetail in score.bowlingDetails">
            <select ng-model="bowlingDetail.bowlerId">
            <option ng-repeat="eachhomePlayers in homePlayers" value="{{eachhomePlayers.id}}">{{eachhomePlayers.name}}</option>
        </select>
        </span>
        <button ng-click="update('away')">Update</button>
    </div>
</body>

在这里代码正在运作，但是当我选择第一局并在选择第二局之后，第一局的选项框将会清除。

Answer 1

请参阅两个选择字段的ng-model="battingDetail.playerId" ng-model相同。你应该改变单独的名字。因为如果在选择第二个下拉列表时使用相同的名称，它将影响第一个下拉列表，第一个下拉列表中没有您在第二个下拉列表中选择的对象。所以很清楚。

复制并发布此代码而不是您的代码

<body ng-app="plunker" ng-controller="MainCtrl">

India batting vs Aus bowling<br>
    <div class="row">
        <span ng-repeat="homeBattingDetail in score.battingDetails">
            <select ng-model="homeBattingDetail .playerId">
            <option ng-repeat="eachhomePlayers in homePlayers" value="{{eachhomePlayers.id}}">{{eachhomePlayers.name}}</option>
        </select> 
        </span>
        <span ng-repeat="homeBowlingDetail in score.bowlingDetails">
            <select ng-model="homeBowlingDetail .bowlerId">
            <option ng-repeat="eachawayPlayers in awayPlayers" value="{{eachawayPlayers.id}}">{{eachawayPlayers.name}}</option>
        </select>
        </span>
        <button ng-click="update('home')">Update</button>
    </div>

Aus batting vs India bowling<br>
    <div class="row">
        <span ng-repeat="awayBattingDetail in score.battingDetails">
            <select ng-model="awayBattingDetail.playerId">
            <option ng-repeat="eachawayPlayers in awayPlayers" value="{{eachawayPlayers.id}}">{{eachawayPlayers.name}}</option>
        </select> 
        </span>
        <span ng-repeat="awayBowlingDetail in score.bowlingDetails">
            <select ng-model="awayBowlingDetail.bowlerId">
            <option ng-repeat="eachhomePlayers in homePlayers" value="{{eachhomePlayers.id}}">{{eachhomePlayers.name}}</option>
        </select>
        </span>
        <button ng-click="update('away')">Update</button>
    </div>
</body>

我在哪里

家庭div

将battingDetail更改为homeBattingDetail

将bowlingDetail更改为homeBowlingDetail

离开

将battingDetail更改为awayBattingDetail

将bowlingDetail更改为awayBowlingDetail

如何使用angularjs填充选择框

1 个答案: