如何使用angulajs将相同的数据绑定到不同的选项?

时间:2022-02-13 23:55:43

I'm trying to select data and bind it to a specific item, however once I select the data, all of my items are now bound to the selected data. How can I select specific data to each of my items.

我正在尝试选择数据并将其绑定到特定项目,但是一旦我选择了数据,我的所有项目现在都绑定到所选数据。如何为每个项目选择特定数据。

here is my demo. http://play.ionic.io/app/cb25b106e671

这是我的演示。 http://play.ionic.io/app/cb25b106e671

1 个解决方案

#1


You need a mapping data structure to save selection for each day. There can be better way but quite simply it can be like this

您需要一个映射数据结构来保存每天的选择。可以有更好的方法,但很简单就可以这样

  $scope.data = {
     "Monday": {workout: ''},
     "Tuesday": {workout: ''},
     "Wednesday": {workout: ''},
     "Thursday": {workout: ''},
     "Friday": {workout: ''},
     "Saturday": {workout: ''},
     "Sunday": {workout: ''}
  }

and you also need to track the current day selected so you can map the selected workout to that currentDay key.

并且您还需要跟踪所选的当前日期,以便您可以将所选锻炼映射到该currentDay密钥。

So first, set curretDay when you open workout selector by doing this

首先,通过执行此操作打开锻炼选择器时设置curretDay

    <a class="item" ng-repeat="day in days" ng-click="openModal(day.day)">{{data[day.day].workout}}
        <span class="item-note">{{day.day}}</span>
    </a>

and

$scope.openModal = function(day) {
  $scope.currentDay = day;
  $scope.modal.show();
};

Second, when a workout is selected you need to set it on the currentDay key

其次,当选择锻炼时,您需要在currentDay键上设置它

<ion-radio class="item" ng-repeat="item in workouts" ng-value="item.workout" ng-model="data[currentDay].workout">{{item.workout}}</ion-radio>

Here is the complete working demo (based on your demo of course)

这是完整的工作演示(根据您的演示程序)

#1


You need a mapping data structure to save selection for each day. There can be better way but quite simply it can be like this

您需要一个映射数据结构来保存每天的选择。可以有更好的方法,但很简单就可以这样

  $scope.data = {
     "Monday": {workout: ''},
     "Tuesday": {workout: ''},
     "Wednesday": {workout: ''},
     "Thursday": {workout: ''},
     "Friday": {workout: ''},
     "Saturday": {workout: ''},
     "Sunday": {workout: ''}
  }

and you also need to track the current day selected so you can map the selected workout to that currentDay key.

并且您还需要跟踪所选的当前日期,以便您可以将所选锻炼映射到该currentDay密钥。

So first, set curretDay when you open workout selector by doing this

首先,通过执行此操作打开锻炼选择器时设置curretDay

    <a class="item" ng-repeat="day in days" ng-click="openModal(day.day)">{{data[day.day].workout}}
        <span class="item-note">{{day.day}}</span>
    </a>

and

$scope.openModal = function(day) {
  $scope.currentDay = day;
  $scope.modal.show();
};

Second, when a workout is selected you need to set it on the currentDay key

其次,当选择锻炼时,您需要在currentDay键上设置它

<ion-radio class="item" ng-repeat="item in workouts" ng-value="item.workout" ng-model="data[currentDay].workout">{{item.workout}}</ion-radio>

Here is the complete working demo (based on your demo of course)

这是完整的工作演示(根据您的演示程序)