【问题标题】:Using md-select, pass the entire object of an ng-repeat item, not just a string使用 md-select,传递一个 ng-repeat 项目的整个对象,而不仅仅是一个字符串
【发布时间】:2016-02-13 07:58:48
【问题描述】:

我使用 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的内容)?

【问题讨论】:

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


    【解决方案1】:

    这不适合你吗?

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

    【讨论】:

    • 我一定是脑筋急转弯才错过value 属性,谢谢。
    • 你可以,我们时不时都有! :)
    • 这会将账面价值作为字符串而不是对象传递。所以你要么必须在之后解析它,要么有另一种方式将它传入......
    • stackoverflow.com/questions/35187358/…。使用ng-value="book" 而不是value={{book}}
    • 非常感谢@Liron,您的评论为我节省了很多时间来解决某些手表功能问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-07
    • 1970-01-01
    • 1970-01-01
    • 2020-05-06
    • 1970-01-01
    相关资源
    最近更新 更多