Question

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

现在我的问题是，我怎么能这样做才能记下选择了哪个选项？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这是一个codepen link：

Answer 1

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

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

然后，您可以在按钮中添加ng-click并更改范围内的某些字段。

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

你可以展示选择的＆＃39;使用{{}}或ng-bind

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

Answer 2

对于任何有角度的应用，您的网页都应包含ng-app和ng-controller属性。我们将在您的身体中设置

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

现在我们需要创建一个名为myApp的角度模块，并为其添加一个名为myCtrl的控制器。控制器应具有items集合和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-repeat方法遍历items集合并打印小部件

  <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。

以下是jsbin

上的工作示例

AngularJS - 显示已选择的选项

2 个答案: