文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS -显示选择了哪个选项

问AngularJS -显示选择了哪个选项
EN

Stack Overflow用户

提问于 2015-12-04 12:50:48

回答 2查看 78关注 0票数 1

我正在努力学习AngularJS并尝试创建一个简单的商店

现在我的问题是，我怎样才能把它写下来，选择了哪一个选项？

body {
  margin: 5em;
}
.shop {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.shop .thumb {
  width: 150px;
}
.shop button {
  font-weight: bold;
  color: white;
  background-color: black;
  border-radius: 15px;
  border: none;
}

<div class="row shop">
  <div class="thumb">
    <div class="thumbnail">
      <img class="img-responsive" src="http://lorempixel.com/200/200/" alt="">
      <div class="wrapper">
        <div class="caption post-content">
          <h4>Option1</h4>
        </div>
      </div>
      <div class="wrapper">
        <div class="post-meta">
          <button>SELECT</button>
        </div>
      </div>
    </div>
  </div>
  <div class="thumb">
    <div class="thumbnail">
      <img class="img-responsive" src="http://lorempixel.com/200/200/" alt="">
      <div class="wrapper">
        <div class="caption post-content">
          <h4>Option2</h4>
        </div>
      </div>
      <div class="wrapper">
        <div class="post-meta">
          <button>SELECT</button>
        </div>
      </div>
    </div>
  </div>
  <div class="thumb">
    <div class="thumbnail">
      <img class="img-responsive" src="http://lorempixel.com/200/200/" alt="">
      <div class="wrapper">
        <div class="caption post-content">
          <h4>Option3</h4>
        </div>
      </div>
      <div class="wrapper">
        <div class="post-meta">
          <button>SELECT</button>
        </div>
      </div>
    </div>
  </div>
  <div class="thumb">
    <div class="thumbnail">
      <img class="img-responsive" src="http://lorempixel.com/200/200/" alt="">
      <div class="wrapper">
        <div class="caption post-content">
          <h4>Option4</h4>
        </div>
      </div>
      <div class="wrapper">
        <div class="post-meta">
          <button>SELECT</button>
        </div>
      </div>
    </div>
  </div>
</div>

<hr />


<div class="row text-center">
  <h1>YOU HAVE SELECTED [selected option should be here]</h1>
</div>

这是一个代码链接

angularjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-12-04 13:05:05

我把你的代码分叉了：http://codepen.io/anon/pen/GoRrvw。首先，您的代码必须被ng-app包围。

<div ng-app>
   ...code...
</div>

然后，可以将ng-click添加到按钮中，并更改作用域中的一些字段。

<button ng-click="selected='optionX'">
    SELECT
</button>

您可以使用{{}}或ng-bind显示“selected”

<h1>YOU HAVE SELECTED {{selected}}</h1>

票数 3

Stack Overflow用户

发布于 2015-12-04 13:15:26

对于任何角度应用程序，您的页面应该具有ng-app和ng-controller属性。我们会把它放在你的身体里

<body ng-app="myApp" ng-controller="myCtrl">

现在，我们需要创建一个名为myApp的角度模块，并在其中添加一个名为myCtrl的控制器。控制器应该有一个项集合和一个selectedItem属性。

var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){

  $scope.selectedItem = {name:""};
  $scope.items=[];

  //Hard coded for demo. You might get it from a service

  $scope.items.push({name:"Scott",url:"http://lorempixel.com/200/200/"});
  $scope.items.push({name:"Shyju",url:"http://lorempixel.com/200/200/"});
  $scope.items.push({name:"Brad",url: "http://lorempixel.com/200/200/"});


  $scope.selectItem=function(item){        
    $scope.selectedItem=item;
  };


});

现在，在页面中，我们将使用ng-重复方法循环遍历项集合并打印小部件。

  <div class="thumb" ng-repeat="item in items">
    <div class="thumbnail">
      <img class="img-responsive" src="{{item.url}}" alt="">
      <div class="wrapper">
        <div class="caption post-content">
          <h4>{{item.name}}</h4>
        </div>
      </div>
      <div class="wrapper">
        <div class="post-meta">
          <button ng-click="selectItem(item)">SELECT</button>
        </div>
      </div>
    </div>
  </div>
</div>

当用户单击SELECT按钮时，您可以看到，我们正在运行selectItem方法并传递当前项，这将成为新的selectedItem。

下面是吉斯宾上的一个工作示例

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34088839

复制

相似问题

问AngularJS -显示选择了哪个选项
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS -显示选择了哪个选项EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS -显示选择了哪个选项
EN