선택 상자의 각도, 부울 값

선택 상자의 각도, 부울 값

여기서 선택한 코드를 사용하여 부울 값을 true 또는 false로 설정합니다.

<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>

가치(제안).formal Storyboard)는 true 또는 false로 올바르게 설정되어 있지만 값이 이미 할당되어 있으면 변경 내용이 선택 상자에 반영되지 않습니다.

값뿐만 아니라 ng-value="true"와 ng-value="false"를 시도했지만 잘 되지 않습니다.

편집: 코멘터들은 저의 원래 솔루션이 주장대로 작동하지 않았다고 지적했습니다.아래의 정답을 반영하여 답변을 업데이트하였습니다(승인된 답변은 삭제할 수 없습니다).

Angular 1.0.6의 경우 다음 HTML을 고려하십시오.

<div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool"
            ng-options="o.v as o.n for o in [{ n: 'Not included', v: false }, { n: 'Included', v: true }]">
    </select>
    <p>
        Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }}
   </p> 
 </div>
</div>

그리고 이 JavaScript:

function MyCntrl($scope) {
    $scope.mybool = true;
}

이것은 Angular 1.0.6의 동작 DEMO이며, Angular 1.3.14의 동작 DEMO는 약간 다릅니다.

이렇게 하면 됩니다.

<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>

및 정의:

$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};

왜 그냥 이걸 쓰지 않는 거죠?

<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>

version angularjs 를 하는 >= 1.2.0 하면 지시가 나옵니다.ng-value

.ng-value옵션 요소 위에 있습니다.합니다.html은 이렇게동작합니다.

<select ng-model="proposal.formalStoryboard">
    <option ng-value="true">Included</option>
    <option ng-value="false">Not Included</option>
</select>

라디오나 체크박스에서도 사용할 수 있습니다.

나는 이것을 위해 지시문을 사용할 것을 추천한다.평소처럼 타임아웃이나 다른 비동기 조작은 피하고 보다 권위적이고 직접적인 제어를 선호합니다.

directives.directive('boolean', function() {
  return {
    priority: '50',
    require: 'ngModel',
    link: function(_, __, ___, ngModel) {
      ngModel.$parsers.push(function(value) {
        return value == 'true' || value == true;
      });

      ngModel.$formatters.push(function(value) {
        return value && value != 'false' ? 'true' : 'false';
      });
    }
  };
});

됩니다( 않고 priority가로 설정되어 있습니다).0)

를 들어, 이 디렉티브는, 「」, 「」(/「」)와 합니다.selectpicker내 몸을 감싸는 지시문select의 selectpicker부트스트랩 플러그인

편집:

여기서 주의할 점은 html 값이 문자열 값이어야 한다는 것입니다.을 그대로 합니다.boolean 의 견해는string★★★★

%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true }
  %option{ value: 'true' } Listed
  %option{ value: 'false' } Unlisted

이것도 잘 될 거야.값에 대한 각도 식을 삽입하여 값을 강제로 부울로 설정합니다.

<select class="span9" ng-model="proposal.formalStoryboard">
    <option value="{{false}}" 
           ng-selected="proposal.formalStoryboard === false">
           Not Included
    </option>
    <option value="{{true}}"
            ng-selected="proposal.formalStoryboard === true">
            Included
    </option>
</select>

샘플을 만들어 드렸으니 확인 부탁드립니다.

모델을 사용하여 UI 바인딩을 실행하시겠습니까?

<div ng-app ng-controller="Ctrl">
    <select class="span9" ng-model="proposal.formalStoryboard">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <button ng-click="changeValue();">Click</button>
<div>

function Ctrl($scope) {
    $scope.proposal = {};
    $scope.proposal.formalStoryboard = true;

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}

나는 이 짜증나는 문제에 대해 거의 성공하지 못했다.이 솔루션은 추가 코드 라인이기 때문에 그다지 우아하지는 않지만 매번 문제를 해결했습니다.이것은, 일부의 애플리케이션에서는 동작하지 않는 경우가 있습니다.

$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();

페이지에 표시된 모델에 다시 바인딩하기 전에 "실제" 문자열로 변환하면 값을 올바르게 선택할 수 있습니다.

Angular는 Value to ng-model과 Values in the options의 엄밀한 결합을 수행합니다.첫 번째 질문에 제시된 값은 문자열 "false"와 "true"입니다.ng-model 값이 유형 bool이고 {"Value":false}처럼 정의된 경우 문자열과 bool 사이의 Angulars strict === 압축이 일치하지 않으므로 선택 상자가 비어 있습니다.

진짜 문제는 값을 선택하면 유형이 부울에서 문자열({"Value":false} --> {"Value":"false"})로 변경되면 다시 게시할 때 오류가 발생할 수 있다는 것입니다.

두 가지 문제 모두에 대한 최고의 해결책은 이 포스트의 티아고 파소스 중 하나였습니다.(https://stackoverflow.com/a/31636437/6319374)

<script type='text/javascript'>
function MyCntrl($scope) {<!--from   ww w . j  a  v a 2s.  c om-->
  $scope.mybool = true;
}

</script>
</head>
<body>
  <div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <p>
    Currently selected: {{ mybool }}
   </p>
 </div>
</div>
</body>
</html>

언급URL : https://stackoverflow.com/questions/17753927/angular-boolean-value-in-a-select-box