javascript - AngularJS - 如何根据下拉选项更改键值

标签 javascript angularjs angularjs-scope

我将键推送到一个数组,并迭代它以获取下拉列表中的选项。创建一对(键,值),数组中的键和选项是相同的。当我们更改下拉列表中的选项时,相应的值应该以 HTML 形式呈现。

这是代码:

$scope.viewItemKeys = [pencils, pens, books];

$scope.viewItemObj = {
    "pencils": {
      "0": {},
      "1": {},
      "2": {}
    },
    "pens": {
      "0": {},
      "1": {},
      "2": {},
      "3": {},
      "4": {}
    },
    "5": {},
    "6": {},
    "7": {}
  },
  "books": {
    "0": {},
    "1": {},
    "2": {},
    "3": {},
    "4": {}
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select id="selId" ng-options="key as value for (key , value) in viewItemkeys" ng-model="selectedItem" ng-change='onItemChange()'></select>

如果我选择与键相关的笔(即 1 到 7,在笔内),请帮助我,我需要渲染 {} 值

最佳答案

看看这个 fiddler here

你的 viewItemObj 有点错误

$scope.viewItemObj = {
"pencils": {
  "0": {},
  "1": {},
  "2": {}
},
"pens": {
  "0": {},
  "1": {},
  "2": {},
  "3": {},
  "4": {},
  "5": {},
  "6": {},
  "7": {}
},
"books": {
  "0": {},
  "1": {},
  "2": {},
  "3": {},
  "4": {}
}

};

那里多了一个“}”。 我已将 HTML 修改如下

<select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select><br/>
  Selected Item - {{selectedItem | json}}

这将呈现您选择的键的值。
让我知道这是否是您正在寻找的。

编辑
根据您的评论,我为您创建了一个新的 FIddle here 。这个新 fiddle 将显示所选对象的值。我对 HTML 做了一些修改:

<div ng-controller="MyCtrl">
  <select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select>
  <div ng-repeat="item in selectedItem">
    {{item.Name}}
  </div>
</div>

我还在您的对象中添加了一些虚拟数据

$scope.viewItemObj = {
    "pencils": {
      "0": {
        Name: "Camel"
      },
      "1": {
        Name: "Nataraj"
      },
      "2": {
        Name: "Space"
      }
    },
    "pens": {
      "0": {
        Name: "Camel"
      },
      "1": {
        Name: "Parker"
      },
      "2": {
        Name: "Fountain"
      },
      "3": {
        Name: "Dealer"
      },
      "4": {
        Name: "Gel"
      },
      "5": {
        Name: "Inker"
      },
      "6": {
        Name: "Mountain View"
      },
      "7": {
        Name: "Decor"
      }
    },
    "books": {
      "0": {
        Name: "The Da Vinci Code"
      },
      "1": {
        Name: "How to kill a Mocking Bird"
      },
      "2": {
        Name: "Tooth and Nails"
      },
      "3": {
        Name: "A song of Ice and Fire"
      },
      "4": {
        Name: "Dance with the Dragons"
      }
    }
  };

关于javascript - AngularJS - 如何根据下拉选项更改键值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36646632/

相关文章:

javascript - 如何在reactjs中使用this.refs从输入类型获取值?

javascript - 我在力矩和 Angular 过滤器方面遇到问题

javascript - $scope Angular 问题

不使用 push() 时,AngularJS 工厂属性未在 $scope 中更新

javascript - 访问 ng-repeat 的项目范围

javascript - 如何使用 javascript 和服务帐户发出 Google Calendar API 请求?

javascript - 视差滚动背景图像自动放大和缩小

javascript - 3 秒后刷新对 Controller 的 JavaScript 和 Ajax 调用,无需在 MVC 4 中的 Razor View 中进行任何单击

AngularJs : Passing parameter to ng-click in directive

javascript - 试图获得每个对象的总和