2016-11-03 3 views
-1

양식의 모든 입력란에 glyphicon-eye가 있습니다. 사용자가 glyphicon-eye-open을 클릭하면 glyphicon-eye-close로 바뀌고 특정 필드 이름을 배열로 푸시합니다.Angularjs 값을 기준으로 글리 phicon 눈을 표시하는 방법은 무엇입니까?

내 JSON 응답에서 숨겨진 필드 값을 가져 오지만 어떻게 그 값을 사용하고 정확한 글리프 아이콘을 호출 할 수 있습니까?

JSON 응답 :

{ 
    "response": { 
    "status": { 
     "code": "0", 
     "message": "Success" 
    }, 
    "service": { 
     "servicetype": "4", 
     "functiontype": "1005" 
    }, 
    "data": { 
     "session_id": "372", 
     "roles": [ 
     { 
     "hiddenfields": [ 
      { 
      "fname": "firstname", 
      "fblink": "fblink", 
      "country": "country", 
      "martialStatus": "martialStatus" 
      } 
     ] 
     } 
     ] 
    } 
    } 
} 

컨트롤러 :

$scope.user = { 
      fname: "firstname", 
      lname: "lastname", 
      dob: "dob", 
      gender: "gender", 
      country: "country", 
      state: "state", 
      city: "city", 
      pincode: "pincode", 
      martialStatus: "martialStatus", 
      emailId: "emailId", 
      mobile: "mobile", 
      qualification: "qualification", 
      fblink: "fblink" 

     }; 

     $scope.allow = {}; 

     $scope.users = []; 

     $scope.push = function(){ 
      $scope.users = []; 
      var user = {}, 
       allow = $scope.allow; 
      console.log(allow); 
      Object.keys(allow).forEach(function(key){ 
      allow[key] ? user[key] = $scope.user[key] : null; 
      }); 
      $scope.users.push(user); 
     } 

HTML :

<a class="menu-toggle" class="btn btn-default" ng-model="allow.fname"><i class="glyphicon" ng-class="{'glyphicon-eye-open':allow.fname, 'glyphicon-eye-close':!allow.fname}" ng-click="push(allow.fname = allow.fname?false:true)"></i></a> 

하면 필드 버지니아 lue가 배열되어 있으면 glyphicon-eye-close를 보여줘야합니다.

+0

1. allow.fname이 아닌, 이제 아래에있는 내 모델에 대한 응답을 할당하여 값을 기준으로 glyphicon 수 있어요 그게 뭐야? 2. allow.fname = allow.fname? false : true ... 이것이 어떻게 틀린 것입니까? 3. 푸시 방법은 매개 변수를 사용하지 않습니다. –

+0

여기에 게시하기위한 프로 팁 : (1) 제목을 영어로 된 일반 질문으로 만들고 질문 기호 ('? ')로 끝내십시오. 우리는 오히려 "AngularJS"와 같은 주제가 처음부터 끝까지 집에서 만든 태그에 추가되지는 않을 것이고,'Mongo - PHP - question'과'JavaScript | HTML | CSS | 질문'- 제발 태그 시스템을 사용하십시오. (2) 당신이하는 모든 글에'제발 도와주세요 '를 추가 할 필요가 없습니다 (그리고 그 점에 관해서도). 우리는 당신이 도움을 원한다는 것을 안다. 그래서 그러한 결과에 대한 명백한 진술은 구걸의 한 형태로 읽힐 수있다. – halfer

+0

(3) 게시물에 긴급한 요청을 추가하지 마십시오. 일반적으로 지나치게 요구하거나 무례한 것으로 간주됩니다. [여기에 대한 자세한 내용] (http://meta.stackoverflow.com/q/326569)을 읽어보십시오. (4) 당신이 물어 본 20 가지 질문 중 하나만 받아 들였습니다. 이것은 너무 낮습니다. 이전 질문을 검토하고 받아 들일 수있는 답변이 있는지 확인하십시오. – halfer

답변

0

몇 번이나! doesnot는 ng-clss 내부에서 작동합니다. 대체 하시겠습니까

<a class="menu-toggle" class="btn btn-default" ng-model="allow.fname"> 
    <i class="glyphicon" 
    ng-class="{'glyphicon-eye-open':allow.fname.length > 0, 'glyphicon-eye-close':allow.fname.length == 0}" 
    ng-click="push(allow.fname = allow.fname?false:true)"> 
    </i> 
</a> 
1

다음과 같이 ng-class를 사용할 수 있습니다.

<div class="form-group" ng-repeat="x in allow" > 
     <button class="btn btn-default"><span class="glyphicon" ng-class="{ 'glyphicon-eye-open': x.fname==0 , 'glyphicon-eye-close': x.fname==1}"></span> {{x.name}}</button> 
</div> 

function myCtrl($scope) { 
 
    $scope.allow=[{ 
 
     'fname':1, 
 
     'name':'Anil' 
 
    },{ 
 
     'fname':0, 
 
     'name':'Sunil' 
 
    },{ 
 
     'fname':1, 
 
     'name':'Manil' 
 
    }] 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div ng-app ng-controller="myCtrl" class="col-md-12"> 
 
    <div class="form-group" ng-repeat="x in allow" > 
 
     <button class="btn btn-default"><span class="glyphicon" ng-class="{ 'glyphicon-eye-open': x.fname==0 , 'glyphicon-eye-close': x.fname==1}"></span> {{x.name}}</button> 
 
    </div> 
 
</div>

0

나는

$scope.allow = response.data.roles[0].hiddenfields[0]; 
관련 문제