CODEWITHSUNDEEP
angularjs
ekclone
ekclone

Reputation: 1092

AngularJS - show which option has been selected

I'm trying to learn AngularJS and tried to create a simple shop

Now my question is, how could I make it so that it writes down which option has been selected?

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>

Here's a codepen link:

Upvotes: 1

Views: 80

Answers (2)

Shyju
Shyju

Reputation: 218832

For any angular app, your page should have ng-app and ng-controller properties. We will set that in your body 

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

Now we need to create an angular module called myApp and add a controller called myCtrl to that. The controller should have an items collection and a selectedItem property. 

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


});

Now in the page, we will use ng-repeat method to loop through the items collection and print the widget

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

You can see the when user clicks on the SELECT button, we are alling the selectItem method and passing in the current item and that will become the new selectedItem.

Here is a working sample on jsbin

Upvotes: 0

Christoph
Christoph

Reputation: 2053

I forked your codepen: http://codepen.io/anon/pen/GoRrvw. First it's necessary that your code is surrounded by a ng-app .

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

Then you can add ng-click to your buttons and change some fields inside your scope.

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

And you can show 'selected' with {{}} or ng-bind

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

Upvotes: 3

Related Questions