1
私はフロントエンドプログラミングに新しいので、いくつかのガイダンスを得ることを望んでいます。私は、ng-repeatとng-modelを使用するHTML AngularJを使用してアプリケーションを開発しており、ユーザーのデータベース内のデータに基づいて複数の行を取り込みます。各行には、DBから来る静的データ（restAPIを介してオブジェクトとして戻される）と、ユーザー選択のための動的選択オプションがあります。選択オプションは、app.jsでハードコードされ、更新ボタンを使用して選択すると、DB上でHTML上のモデルにリンクされます。問題は、ある行のリストから任意の値を選択するときです。これは、他の行の選択オプションに反映されます。各行には独自のボタンがあり、更新機能が行レベルで動作していることがわかります。以下はドロップダウンリストの1行の変更はすべての行を反映します
HTMLとJSファイル
<body>
<h1 align="center">User Tracker</h1>
<div ng-controller="MainController as main">
<div>
<p>Please Enter ID </p>
<p>
<input type="text" ng-model="main.model.userName"></input>
<button ng-click="main.model.getOrgList()">List Org List</button>
</p>
</div>
<hr ng-show="main.model.formSubmitted"></hr>
<div>
<table class="table table-bordered" border="1" ng-show="main.model.formSubmitted">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="org in main.model.orgList" id="{{org.id}}">
<td>{{org.id}}</td>
<td align="center">{{org.user}}</td>
<td align="center">
<select ng-model="main.model.selectedRecord.appCurrentStateSelected ">
<option ng-repeat=" option in main.model.appCurrentStateList " value ="{{option.value}}" id="{{option.id}}"> {{option.name}} </option>
</select>
</td>
<td>
<button ng-click="main.model.updateAppDetailsList({id:org.id,userName:org.name,appCrntState:main.model.selectedRecord.appCurrentStateSelected})">Update</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
全HTMLとJSファイルはこちらです - https://jsfiddle.net/4jbtL0cj/
@vのSONI、あなたはこれを解決したのですか？あなたがしていれば、受け入れられたままupvote/markしてください。 –