Javascript 如何在AngularJS中遍历模型数据？

我有一个支持JSON的下拉列表，如下所示：

$scope.tradestyles = [
    {"id":"1","source":"Source One","name":"Name One"},
    {"id":"2","source":"Source Two","name":"Name Two"}
]

<div ng-app="myApp">
    <div ng-controller='Ctrl'>
        <select id="tradestyle" ui-select2 ng-model="currentTsIndex">
            <option ng-repeat="tradestyle in tradestyles" value="{{$index}}">{{tradestyle.name}}</option>
        </select>
        <input type="text" ng-model="tradestyles[currentTsIndex].name" />
    </div>
</div>

这是下拉列表，使用

选择2

，模型是所选tradestyle的ID：

<select id="tradestyle" ui-select2 ng-model="currentTradestyle" >
    <option ng-repeat="tradestyle in tradestyles" value="{{tradestyle.id}}">
        {{tradestyle.name}}
    </option>
</select>

{{tradestyle.name}

在它旁边，我想放置一个文本字段，其中显示所选tradestyle的名称，并 可以编辑

<input type="text" ng-model="currentTradestyle" />

---

如何更改后者的模型以指向所选tradestyle的名称而不是ID？换句话说，如何遍历scope对象以指向所选ID值的同级名称值？

如果我正确理解了您的问题，您需要使用

ng options

绑定到对象而不是字段。所以它变成了

 <select id="tradestyle" ui-select2 ng-model="currentTradestyle" ng-options="style.name for style in tradestyles">

        </select>
 <input type="text" ng-model="currentTradestyle.id" />
 <input type="text" ng-model="currentTradestyle.name" />

看到我的小提琴了吗

---

如果我正确理解了您的问题，您需要使用

ng options

绑定到对象而不是字段。所以它变成了

 <select id="tradestyle" ui-select2 ng-model="currentTradestyle" ng-options="style.name for style in tradestyles">

        </select>
 <input type="text" ng-model="currentTradestyle.id" />
 <input type="text" ng-model="currentTradestyle.name" />

看到我的小提琴了吗

---

我相信您要找的是这样的东西：

$scope.tradestyles = [
    {"id":"1","source":"Source One","name":"Name One"},
    {"id":"2","source":"Source Two","name":"Name Two"}
]

<div ng-app="myApp">
    <div ng-controller='Ctrl'>
        <select id="tradestyle" ui-select2 ng-model="currentTsIndex">
            <option ng-repeat="tradestyle in tradestyles" value="{{$index}}">{{tradestyle.name}}</option>
        </select>
        <input type="text" ng-model="tradestyles[currentTsIndex].name" />
    </div>
</div>

{{tradestyle.name}

---

工作：

我相信你要找的是这样的东西：

$scope.tradestyles = [
    {"id":"1","source":"Source One","name":"Name One"},
    {"id":"2","source":"Source Two","name":"Name Two"}
]

<div ng-app="myApp">
    <div ng-controller='Ctrl'>
        <select id="tradestyle" ui-select2 ng-model="currentTsIndex">
            <option ng-repeat="tradestyle in tradestyles" value="{{$index}}">{{tradestyle.name}}</option>
        </select>
        <input type="text" ng-model="tradestyles[currentTsIndex].name" />
    </div>
</div>

{{tradestyle.name}

工作：

这可能会满足您在评论中提出的问题。它在

s中使用tradestyle.id而不是$index，这意味着在对集合应用筛选器的情况下，所选项目可以工作。附加的$parser确保tradestyle.id在应用于currentTradestyle模型属性之前实际上成为选定的tradestyle项

下划线上有一个依赖项，但您可以使用findWhere（）方法的更长的替代方法来删除该依赖项

这可能会满足您在评论中提出的问题。它在

s中使用tradestyle.id而不是$index，这意味着在对集合应用筛选器的情况下，所选项目可以工作。附加的$parser确保tradestyle.id在应用于currentTradestyle模型属性之前实际上成为选定的tradestyle项

下划线上有一个依赖项，但您可以使用findWhere（）方法的更长的替代方法来删除该依赖项

---

谢谢，但ui-select2与ng选项不兼容。我希望得到一个与ui-select2.Hmmm兼容的答案，也许您可以尝试在

选项上单击
ng-click
，然后手动选择控制器中的项目。如果您在ng-repeat中单击ng-click，您将创建与该重复中的元素一样多的事件处理程序，我认为这不是一个有效的解决方案。类似这样的东西
ng click=“currentTradestyle=tradestyle”
谢谢，但是ui-select2与ng选项不兼容。我希望得到一个与ui-select2.Hmmm兼容的答案，也许您可以尝试在
选项上单击
ng-click
，然后手动选择控制器中的项目。如果您在ng-repeat中单击ng-click，您将创建与该重复中的元素一样多的事件处理程序，我认为这不是一个有效的解决方案。像这样的东西应该适合我的情况。我会发现使用ID作为下拉值更优雅，
currentTradestyle.name
看起来比
tradestyles[currentIndex].name
更好，但我不想对此信以为真。我遇到的另一个问题是Angular无法跟踪我在编辑字段中所做的更改，并在以后更新下拉列表，而不是与我的键入同步。必须是ui-select2 issueThanks，在我的情况下应该可以使用。我会发现使用ID作为下拉值更优雅，
currentTradestyle.name
看起来比
tradestyles[currentIndex].name
更好，但我不想对此信以为真。我遇到的另一个问题是Angular无法跟踪我在编辑字段中所做的更改，并在以后更新下拉列表，而不是与我的键入同步。必须是ui-select2问题