Jquery 如何使用angularjs填充selectbox_Jquery_Html_Angularjs

Jquery 如何使用angularjs填充selectbox

jquery html angularjs

Jquery 如何使用angularjs填充selectbox,jquery,html,angularjs,Jquery,Html,Angularjs,我有两个选择框分区，用于获取主队和Awaytems第一局和第二局的得分详细信息这两个div在我的网页中的同一页中，带有tabs按钮但当我使用这种方式时，我的浏览器将挂起，日志中不会出现任何错误消息因此，我需要在两局中使用相同的ng模型来进行代码重用但当我使用我的浏览器时，它会挂起 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.score = {

我有两个选择框分区，用于获取主队和Awaytems第一局和第二局的得分详细信息

这两个div在我的网页中的同一页中，带有tabs按钮

但当我使用这种方式时，我的浏览器将挂起，日志中不会出现任何错误消息

因此，我需要在两局中使用相同的ng模型来进行代码重用

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

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>


印度击球队对澳大利亚保龄球队

{{eachhomePlayers.name}
{{eachawayPlayers.name}
更新
澳大利亚击球队对印度保龄球队

{{eachawayPlayers.name}
{{eachhomePlayers.name}
更新

这里是代码，但当我选择第一局和第二局之后，第一局的选择框将被清除。

请参见您的

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>


印度击球队对澳大利亚保龄球队

{{eachhomePlayers.name}
{{eachawayPlayers.name}
更新
澳大利亚击球队对印度保龄球队

{{eachawayPlayers.name}
{{eachhomePlayers.name}
更新

在哪里，我有

主分区

将

battingDetail

更改为

homeBattingDetail

将

bowlingDetail

更改为

homeBowlingDetail

客场跳水

将

battingDetail

更改为

awayBattingDetail

将

bowlingDetail

更改为

awayBowlingDetail

我看到了，但我需要同样的方法，因为我在我的db中以相同的字段名称添加我的分数，我以相同的结构分别添加第一局和第二局的分数，当我获取时，它应该是可见的，你们需要输入单独的名称。然后获取它并将其分配给db模型名称。否则这个问题会继续，就像你检查它一样，当我在第二局第一局更改选择框时，选择框会以其他方式清除，如果我在第二局更改playerId和bowlerId，这将解决问题，但我的db feld名称是playerId和bowlerId。如果我的更改意味着在获取和发布此db名称时如何重新赋值如果我使用文本框，则不会出现问题，而不是选择框