在 Angular 中，在选定的选项上为其他选项设置默认值 [英] In Angular, on selected option set default values for other options

问题描述

问题:如何将 selected sizes 作为索引来映射和显示正确的 price 和 tsin eq 到尺寸索引

<小时>

注意:

• 我正在尝试在尺寸、价格、tsin 之间建立关系

   "黑色": {"sizes": "X 小，小","价格": '$22.24, $24.94',"tsin": "111002, 111003"},

例如如果选择黑色并且选择的尺寸为索引 [0](或 - X 小)，那么在 ng-change 时，价格将更新为 22.24 美元，tsin 为 111002

<小时>

更新:我已经更新了小提琴以接近一点，但原型继承不存在.我只是想说明想要的效果

解决方案

简单看一下这个

工作演示

html

<select ng-model="item.mySize" ng-change="setCurrentPrice(val.sizes.split(','),val.prices.split(','),val.tsin.split(','))" ng-options="choice as selection for (idx, choice) in val.sizes.split(',')"><option value="">请选择尺寸</option></选择>

脚本

$scope.setCurrentPrice = function(sizes, price, tsin) {var index = size.indexOf($scope.item.mySize);$scope.item.myPrice = 价格[索引];$scope.item.myTsin = tsin[index];$scope.item.currentPrice = 价格[指数];$scope.item.mySize = 尺寸[索引];};

Question: How can I take the selected sizes as an index to map and display the proper price and tsin eq to the sizes index

---

Notice:

• I'm trying to create a relationship between sizes, prices, tsin

    "Black": {
      "sizes": "X Small, Small",
      "prices": '$22.24, $24.94',
      "tsin": "111002, 111003"
    },
  

e.g. if the color black was picked and the size selected was of index [0](or - X Small) then on ng-change the price would update to $22.24 and the tsin is 111002

---

UPDATE: I've updated the fiddle to get a bit closer but the prototypical inheritance isn't there. I just wanted to illustrate the desired effect

UPDATED JSFiddle

UPDATED 2x Callebe gave me a solution that gotten me closer but still not desired or working properly

JSFiddle

I have a simple controller with some fake data coming in from an $http:

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

app.controller('Ctrl', function ($scope, $filter, $http) {
    //lowest price is coming in from the init api request on production
    var lowestPrice = '$21.24';
    // exposes currentPrice to the view
    $scope.currentPrice = lowestPrice;

    // function to change the currentPrice to the selected Products price
    $scope.getCurrentPrice = function(idx) {
          $scope.currentPrice = idx;
    }
 //fake data that simulates a piece of the json object response. 
 $scope.productData = {
  "colors_and_sizes": {
    "data": {
      "Black": {
        "prices": '$21.24, $29.94',
        "swatch_image": 'http://lorempixel.com/50/50',
        "sizes": "X Small, Small",
        "prices": '$22.24, $24.94',
        "tsin": "111002, 111003"
      },
      "Blue": {

        "swatch_image": 'http://lorempixel.com/50/51',
        "sizes": "X Small, Small",
        "prices": '$22.24, $24.94',
        "tsin": "112005, 112007"
      }
    }
  }
};

});

Notice:

• I know i know, The data is coming in pretty badly for what I'm trying to do.

the sizes prices and tsin are strings. However, I split them them when I get to the view:

<form ng-app="app" ng-controller="Ctrl" ng-init="item = this">
    <div class="color-pick" 
         ng-repeat="(key, val) in productData.colors_and_sizes.data track by $index">
        <input 
             type="radio" 
             name="colors" 
             hidden="true"  
             ng-model="item.myColor" 
             ng-value="key" />

        <img 
             ng-click="item.myColor = key" 
             ng-src="{{val.swatch_image}}" 
             alt="">
        {{key}} 

        <div class="size-pick" ng-show="item.myColor==key">
            <select 
                ng-model="item.mySize"

                <!--split the sizes into an array call it choice -->
                <!--idx as choice  could be idx to get key but then breaks the value cannot do (idx, choice) as choice for (idx, choice) in val.sizes.split(',') -->
                ng-options="choice as choice for (idx, choice) in val.sizes.split(',')">
                <option value="">Please select a size</option>

                ng-change="setCurrentPrice(val.sizes.split(',')[idx])"
            </select>
        </div>

    </div>
</form>

in the end I would like 4 values to be displayed on the view:

mySize: {{ item.mySize}}
myColor: {{item.myColor}}
myPrice: {{item.currentPrice}} 
myTsin: {{item.myTsin}} 

Again please check out my (OLD FIDDLE UPDATE ABOVE) JSfiddle

解决方案

Its simple take a look at this

Working Demo

html

<select ng-model="item.mySize" ng-change="setCurrentPrice(val.sizes.split(','),val.prices.split(','),val.tsin.split(','))" ng-options="choice as choice for (idx, choice) in val.sizes.split(',')">
     <option value="">Please select a size</option>
</select>

script

$scope.setCurrentPrice = function(sizes, prices, tsin) {
        var index = sizes.indexOf($scope.item.mySize);
        $scope.item.myPrice = prices[index];
        $scope.item.myTsin = tsin[index];
        $scope.item.currentPrice = prices[index];
        $scope.item.mySize = sizes[index];
    };

这篇关于在 Angular 中，在选定的选项上为其他选项设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！