Get Object Values without Making Object Identical

by p0lska

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
    <input ng-model="search"></input>
    <div ng-repeat="(key, member) in members | filter:search | orderBy :'-name'">
        <li ng-class="{active: retActive(key)}"
            ng-click="selectThis($index)">
            name: {{member.name}} key: {{key}}
                <button ng-click="deleteThis(key)">delete</button>
        </li>
    </div>
    Selected member name: {{selectedMember.name}}
</div>

CSS

.active {
    color:blue;
}

JavaScript

angular.module('myApp', []);

function MainCtrl($scope) {
    
    $scope.members = [
                          {"name":"a", "viewIndex":0},
                          {"name":"b", "viewIndex":1},
                          {"name":"bb", "viewIndex":2},
                          {"name":"bb", "viewIndex":3},
                          {"name":"c", "viewIndex":4},
                          {"name":"d", "viewIndex":5},
                          {"name":"e", "viewIndex":6}
                         ];
    
    $scope.activeIndex = 0;
    $scope.selectedMember = $scope.members[0];
    
    $scope.selectThis = function (index) {
        $scope.activeIndex = index;
        //put array member into new object
        $scope.selectedMember = $scope.members[index];  
    }
    
    //splice the selected member from the array  
    $scope.deleteThis = function (index) {
        $scope.members.splice(index, 1);
        $scope.selectThis(index);  
    }
    
    //angular copy and push member to the array
    $scope.duplicateThis = function (index) {
    
    }
    
    // change class if member is active
    $scope.retActive = function (index) {
        return $scope.activeIndex == index;
    }
}