使用md-select,传递ng-repeat项的整个对象,而不仅仅是字符串

时间:2015-11-12 03:24:17

标签: angularjs drop-down-menu pug angular-material angular-ngmodel

我使用Angular Material创建了一个表单,该表单使用下拉列表从book个对象中选择,其中包含名称和ID,最终目的是将其交换到我的集合中的另一本书。以下是我的典型交易对象:

var tradeItem = {
  wanted: {
    user: 'barryjohnson',
    bookId: 'foo1bar2'
  },
  offered: {
    user: 'dangraham',
    bookId: 'bar7baz8'
  },
};

我想在选择菜单中将整个对象保存到ng-model,所以我希望ng-repeat引用整个数组对象。这样我就可以对我的数据库做一个简单的后续请求。

目前只保存标题,这是md-option标记内的标题。

以下是我的观点:

md-dialog(aria-label='Trade', ng-cloak='')
  form
    md-toolbar
      .md-toolbar-tools
        h2 Propose a Trade
        span(flex='')
    md-dialog-content(style='max-width:800px;max-height:810px; ')
      .md-dialog-content
        p Which of your books would you like to trade for '{{userClickedBook.title}}'?
        p {{selected}}
        md-input-container.md-block
          label(for="mySelect") Your Books
          md-select(name="mySelect", ng-model='selected')
            md-option(ng-repeat="book in usersBooks") {{book.title}}
        div(layout='row')
          md-button(ng-click='cancelDialog()', style='margin-right: 20px;') Cancel
          md-button.md-primary(ng-click='save()', ng-disabled='myForm.$invalid', layout='', layout-align='center end') Ok

那么,我如何绑定整个对象,以便$scope.selected就像上面的对象tradeItem,而不只是一个字符串(md-option的内容)?

1 个答案:

答案 0 :(得分:8)

这不适合你吗?

 <md-option ng-repeat="book in userBooks" ng-value="book">
            {{book.title}}
          </md-option>